JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5 Canvasのrotate()メソッドで現在の原点を中心に回転させる方法

rotate()メソッドとは

HTML5のCanvas APIには、現在の原点を中心にキャンバスを回転させるためのrotate(angle)メソッドが用意されています。

このメソッドが受け取る引数は1つだけで、それはキャンバスを回転させる角度です。回転は時計回りに行われ、角度はラジアン単位で指定する点に注意してください。

構文

ctx.rotate(angle)

度数法からラジアンへの変換

「45度」のように普段なじみのある度数法で指定したい場合は、次の式でラジアンに変換できます。

ラジアン = 度 × Math.PI / 180

例えば90度なら Math.PI / 2、180度なら Math.PI となります。

サンプルコード

HTML Canvasを回転させて図形を描画するには、以下のコードを実行してみてください。この例では、translate()で原点を移動した後、rotate()とarc()を組み合わせて、中心から螺旋状に広がるカラフルな円を描きます。

<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #test {
            width: 100px;
            height:100px;
            margin: 0px auto;
         }
      </style>
      <script>
         function drawShape(){
            // DOMを使ってcanvas要素を取得
            var canvas = document.getElementById('mycanvas');

            // canvasがサポートされていない場合は実行しない
            if (canvas.getContext){
               // getContextで描画用の2Dコンテキストを取得
               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('このデモを表示するにはSafariまたはFirefox 1.5+が必要です。');
            }
         }
      </script>
   </head>

   <body id = "test" onload = "drawShape();">
      <canvas id = "mycanvas" width = "400" height = "400"></canvas>
   </body>
</html>

コードのポイント

  • ctx.translate(100,100): 座標系の原点を(100, 100)へ移動し、回転の中心を設定しています。
  • ctx.save() / ctx.restore(): 現在の描画状態を保存・復元することで、各ループでの回転や塗りつぶし設定が次のループに影響しないようにしています。
  • ctx.rotate(Math.PI*2/(i*6)): 1周(2πラジアン)を配置する円の個数で割った角度ずつ回転させることで、円周上に等間隔で図形を配置しています。
  • ctx.arc(0, i*12.5, 5, ...): 原点から距離を変えながら半径5の円を描くことで、螺旋状の模様を作り出しています。

このようにrotate()は、translate()やsave()/restore()と組み合わせることで、複雑な幾何学模様や回転アニメーションを簡単に実装できる強力なメソッドです。

  1. IEでHTML5のcanvas要素を使う方法｜excanvasライブラリの導入手順

    IEでHTML5キャンバスを利用するには？Internet Explorer（IE）でHTML5の<canvas>要素を使用したい場合は、excanvasというJavaScriptライブラリを活用しましょう。excanvasはアドオン形式のライブラリで、旧式のIEブラウザ（IE7・IE8）にHTML5キャンバスの機能を追加してくれます。もともと、Firefox、Safari、Opera 9などはcanvasタグを標準サポートしており、2Dのコマンドベース描画操作が可能でしたが、IEだけは対応していませんでした。ExplorerCanvasの導入方法ExplorerCanvas（ex

  2. SVGとHTML5 Canvasの違いとは？特徴・パフォーマンス・使い分けを徹底解説

    SVGとは？HTMLの<svg>要素は、SVGグラフィックを格納するためのコンテナです。SVGは「Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）」の略称で、ボックスや円、テキストなどの図形を定義するのに適しています。SVGは、XMLを使用して2Dグラフィックスやグラフィカルなアプリケーションを記述するための言語であり、記述されたXMLはSVGビューアによって描画されます。現在では、主要なWebブラウザのほとんどが、PNGやGIF、JPGといった画像形式と同じようにSVGを表示できます。HTML5 Canvasとは？HTMLの<can