[HTML/HTML5] canvas 엘리먼트 : 회전 변환을 사용해 사각형 그리기

■ canvas 엘리먼트에서 회전 변환을 사용해 사각형을 그리는 방법을 보여준다.

▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onLoad()
            {
                var canvas  = document.getElementById('canvas');
                var context = canvas.getContext('2d');

                for(var i = 0; i < 12; i++)
                {
                    context.save();

                    context.translate(100, 100);

                    var angle = (Math.PI * 30 * i) / 180;

                    context.rotate(angle);

                    context.fillStyle = 'rgb(0, 0, 255)';

                    context.fillRect(0, 0, 100, 10);

                    context.restore();
                }
            }
        </script>
    </head>
    <body onload="onLoad();">
        <canvas id="canvas" width="400" height="400" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function onLoad()

{

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

for(var i = 0; i < 12; i++)

{

context.save();

context.translate(100, 100);

var angle = (Math.PI * 30 * i) / 180;

context.rotate(angle);

context.fillStyle = 'rgb(0, 0, 255)';

context.fillRect(0, 0, 100, 10);

context.restore();

}

</script>

</head>

</body>

</html>