HTML5 Canvas 그리기

얼마전 아는 형님이 내준 숙제입니다.
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>

canvas_3

<!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>

 

canvas_4

Notice

  • 이 저작물은 크리에이티브 커먼즈 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용할 수 있습니다. 크리에이티브 커먼즈 라이선스
  • 저작권과 관련된 파일요청 및 작업요청을 받지 않습니다.
  • 댓글에 대한 답변은 늦을 수도 있습니다.
  • 댓글 남기기

    이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다