Canvasによる円,円弧の描画サンプル

icon 項目のみ表示/展開表示の切り替え

Canvasによる円,円弧の描画

HTML5のCanvasを使用して図を表示する場合は、まず図を描く領域を指定します。
このサンプルでは、htmlソース中に以下のように記述しています。
<canvas id="t1" width="320" height="100"></canvas>
CanvasはSVGの様にインラインで記述できず、javascriptで図形を指定して描画する必要があります。htmlを読み込んだ時に自動にjavascriptが実行されるようにwindow.onload = function(){にソースを記述しています。
次にgetElementByIdを使用してCanvasオブジェクトを取得しgetContextメソッドがセットされているかチェックします。
セットされていた場合、Canvas要素よりコンテキストを作成するために、 
var ctx = canvas.getContext('2d');
を呼び出します。ctxにコンテキストが返されます。
線の青を指定するためにstrokeStyleプロパティを設定します。
arcで円を設定しstrokeで円が下図の様に描画されます。

arc(中心x,中心y,半径,開始角度,終了角度,方向)

角度はラジアン単位です。
方向はtrueを指定すると反時計回り、falseを指定すると時計回りに描画されます。 直前の描画位置から始点を直線で結び円弧が描画されます。
直線が不要な場合は、beginPathでパスを初期化する必要があります。

サンプル

320*100の領域に以下の内容を描画します。

円

座標 50,50を中心として半径40の円を描画

ドーナツ

前の円の終点の描画位置から今回描画する円弧の始点位置が直線で結ばれないようにbegnPathを呼び出してパスを初期化します。 座標 150,50を中心として半径40の円を反時計回りに描画し次に同じ中心で半径20の円を時計周りに描画します。2つの円の終点と始点は直線で結ばれます。

バームクーヘン型

前の円の終点の描画位置から今回描画する円弧の始点位置が直線で結ばれないようにbegnPathを呼び出してパスを初期化します。 座標 250,50を中心として半径40の円弧を反時計回りに描画し次に同じ中心で半径20の円弧を時計周りに描画します。2つの円の終点と始点は直線で結ばれます。最後に終点とパスの始点をclosePathを実行することにより直線で接続します。

扇形

moveToにより円弧の中心地点に描画位置を移動させます。 座標 250,50を中心として半径40の円弧を時計回りに描画し最後に始点とパスの視点をclosePathを実行することにより直線で接続します。

ソース

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
</head>
<body>
  <canvas id="t1" width="320" height="100">
  </canvas>
  <script type="text/javascript">

  window.onload = function(){
    var canvas = document.getElementById('t1');
    if (canvas.getContext){
      var ctx = canvas.getContext('2d');
      ctx.strokeStyle = 'rgb(00,00,255)'; //枠線の色は青
// 円
      ctx.arc(50,50,40,0,Math.PI*2,true);
      ctx.stroke();
// ドーナツ型
      ctx.fillStyle='red';
      ctx.beginPath();
      ctx.arc(150,50,40,0,Math.PI*2,true);
      ctx.arc(150,50,20,0,Math.PI*2,false);
      ctx.fill();
// バームクーヘン型
      ctx.beginPath();
      ctx.arc(250,50,40,0,Math.PI*1.5,true);
      ctx.arc(250,50,20,Math.PI*1.5,0,false);
      ctx.closePath();
      ctx.stroke();
// 扇形
      ctx.beginPath();
      ctx.moveTo(250,50);
      ctx.arc(250,50,40,Math.PI*0.5,Math.PI*1,false);
      ctx.closePath();
      ctx.stroke();
    }
  }
  </script>
</body>
</html>
ソースファイルのダウンロード(arc.zip)