HTMLリファレンスマニュアル

HTMLタグ一覧

HTML canvas rotate()メソッド

rotate()はCanvas 2D APIは変換マトリックスに回転メソッドを追加しました。角度変数は時計回りに回転する角度を表し、ラジアンで表されます。

オンラインサンプル

正方形を回転させる 30度：

サンプル

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas rotate()メソッドの使用-基本チュートリアル(oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3">
ブラウザはHTMLをサポートしていません5　canvas タグ。
</canvas>
<script>
var c = document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.rotate(10*Math.PI/180);
ctx.fillRect(50,50,100,100);
</script>
</body>
</html>

テストして見て‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome、Safari が rotate() をサポートしています。メソッド。

注意：Internet Explorer 8 及びそれ以前のバージョンでは <canvas> 要素をサポートしていません。

定義と使用方法

rotate() メソッドは現在の描画を回転します。

注意：回転は、回転が完了した後に作成される図面にのみ影響します。

JavaScript 言語：	context.rotate(angle);

パラメータの値

パラメータ	説明
angle	回転角度（ラジアンで計算）。角度をラジアンに変換するには、以下を使用してください： degreesMath.PI/180 公式で計算します。例：回転するために 5 度、以下の公式で指定できます：5Math.PI/180。

HTML canvas 参考マニュアル

HTML: <template> タグ