キャンバス角度の設定
rotate
解説
rotateを使用すればキャンバス内における描画角度を設定することが出来ます。
座標0,0からの角度になるため、角度を変えると左上から傾いたような感じになってしまいます。
そのため、キャンバスの中央から角度を変えたい場合は、translateを使用してキャンバスの座標0,0をキャンバス中央になるよう指定しておきます。
- rotate
- キャンバスの角度を指定します。
ソースコード
<html><head><!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]--><script type="text/javascript">
function sbRotate() {elmCv = document.getElementById('cv');ctxCv = elmCv.getContext('2d');ctxCv.strokeRect(50,30,300,40);ctxCv.rotate(10 * Math.PI / 180);ctxCv.strokeRect(50,30,300,40);ctxCv.rotate(20 * Math.PI / 180);ctxCv.strokeRect(50,30,300,40);}window.onload = sbRotate;
</script></head><body><canvas id="cv" width="400" height="400"></canvas></body></html>