CANVASを使って描画

次の例は、CANVASを使って扇形の円を描画する。

[HTML]
<form> 
<input type="button" value="描画ボタン">
</form>
<p>扇形の円(10度から80度、反時計回り）</p>
<canvas id="canvas3" width="300" height="300"></canvas>

[JavaScript]
document.addEventListener('DOMContentLoaded',function(){
  var exec = document.querySelector('input[type="button"]');
  exec.addEventListener("click", function() { 
    draw3();
  },false);
},false);
/* 円弧を塗りつぶす */
function draw3() {
  var canvas = document.querySelector('#canvas3');
  if ( ! canvas || ! canvas.getContext ) {
     return false;
  }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  /* 先ほどの円弧を色をつけて塗りつぶす。*/
  /* 筆おろしの座標を定義 */
  ctx.moveTo(150, 150);
  /* 10度から80度、反時計回りで円を描く */
  ctx.arc(150, 150, 100, 10 * Math.PI / 180, 80 * Math.PI / 180, true);
  /* 弧を閉じる */
  ctx.closePath();
  /* 線の色をつける */
  ctx.strokeStyle = 'rgb(0,0,255)';
  /*  内部の色を塗る */
  ctx.fillStyle = 'rgb(192, 80, 77)';
  /* 塗る指令 */
  ctx.fill();
  /* これらの座標に対して線を引く指令 */
  ctx.stroke();
}

扇形の円(10度から80度、反時計回り）