얼마전 아는 형님이 내준 숙제입니다.
canvas를 사용하여 그림을 그리는 부분입니다.
코드는 단순한데 결과물은 이쁘네요.
<!DOCTYPE HTML>
<html>
<head>
<title>circleView</title>
<script type="text/javascript">
function drawShape() {
var canvas = document.getElementById("mycanvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.translate(100,100);
for (i = 1; i < 7; i++) {
ctx.save();
ctx.fillStyle = 'rgb(' + (51 * i) + ',' + (150 - 51 * i)+ ',0)';
for (j = 0; j < i * 6; j++) {
ctx.rotate(Math.PI * 2 / (i * 6));
ctx.beginPath();
ctx.arc(0, i * 12.5, 5, 0, Math.PI * 2, true);
ctx.fill();
}
ctx.restore();
}
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</script>
</head>
<body onload="drawShape();">
<canvas id="mycanvas" width="400" height="400" ></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>transform</title>
<script type="text/javascript">
function drawShape() {
var canvas = document.getElementById("mycanvas");
if (canvas.getContext){
var ctx = canvas.getContext("2d");
var sin = Math.sin(Math.PI/6);
var cos = Math.cos(Math.PI/6);
ctx.translate(200,200);
var c = 0;
for (var i=0; i <= 12; i++) {
c = Math.floor(255 / 12 * i);
ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
ctx.fillRect(0,0,100,100);
ctx.transform(cos, sin, -sin, cos, 0, 0);
}
}else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</script>
</head>
<body onload="drawShape();">
<canvas id="mycanvas" width="400" height="400"></canvas>
</body>
</html>
