HTML5 캔버스는 현재 원점을 중심으로 캔버스를 회전하는 데 사용되는 회전(각도) 메서드를 제공합니다.
이 방법은 하나의 매개변수만 사용하며 이것이 캔버스가 회전하는 각도입니다. 이것은 라디안으로 측정된 시계 방향 회전입니다.
예시
다음 코드를 실행하여 HTML Canvas를 회전할 수 있습니다. −
<!DOCTYPE HTML> <html> <head> <style> #test { width: 100px; height:100px; margin: 0px auto; } </style> <script> function drawShape(){ // get the canvas element using the DOM var canvas = document.getElementById('mycanvas'); // Make sure we don't execute when canvas isn't supported if (canvas.getContext){ // use getContext to use the canvas for drawing var ctx = canvas.getContext('2d'); ctx.translate(100,100); for (i = 1; i < 7; i++){ ctx.save(); ctx.fillStyle = 'rgb('+(51*i)+','+(200-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 id = "test" onload = "drawShape();"> <canvas id = "mycanvas" width = "400" height = "400"></canvas> </body> </html>