円を描くの巻。
HTML
<canvas id='canvas'></canvas> |
JavaScript
var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.beginPath(); context.lineWidth = 8; context.strokeStyle = '#ff0000'; context.arc(100,50,40,(Math.PI/180)*0,(Math.PI/180)*360,false); context.stroke(); context.closePath(); |
beginPathからclosePathの間にコードを書く。
arc
x position:int, y position:int, radius:uint, 開始角度(radians), 終点角度(radians), 描画方向
円の内側を塗る
var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.beginPath(); context.lineWidth = 8; context.strokeStyle = '#ff0000'; context.arc(100,50,40,(Math.PI/180)*0,(Math.PI/180)*360,false); context.stroke(); context.fillStyle = '#333333'; context.fill(); context.closePath(); |
塗りは fillStyle で色を設定して fill() を実行する。
描画方向
false
context.arc(100,50,40,(Math.PI/180)*0,(Math.PI/180)*90,false); |
Canvas arc false
true
context.arc(100,50,40,(Math.PI/180)*0,(Math.PI/180)*90,true); |
Canvas arc true
flaseで時計回り。
trueで反時計回り。
W3C
http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-arc