イナヅマTVログ

Canvas始めました – 円を描いてみる

| 0件のコメント

円を描くの巻。

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

Canvas arc false

true

context.arc(100,50,40,(Math.PI/180)*0,(Math.PI/180)*90,true);
Canvas arc true

Canvas arc true

flaseで時計回り。
trueで反時計回り。

W3C
http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-arc

コメントを残す