HTMLキャンバスrotate()メソッド

定義と使用法

rotate() 現在の描画を回転する方法

四角形を20度回転します:

ブラウザはHTML5キャンバスタグをサポートしていません。

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rotate(20 * Math.PI / 180);
ctx.fillRect(50,20,100,50);

実際に試してみる

文法

context.rotate(angle);

パラメータの値

パラメータ 説明
angle

ラジアンで計算される回転角度。

角度をラジアンに変換する場合は、degrees * Math.PI / 180 公式を使用して計算してください。

例:5度を回転する場合は、以下の公式を使用できます:5 * Math.PI / 180。

ブラウザのサポート

表の数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

注記:Internet Explorer 8 以前のバージョンは <canvas> 要素をサポートしていません。