【Canvas入門2】HTML5のCanvasを使って円形/丸を描画する方法

前回はキャンバスを使って四角を描画しましたが今回は円形/丸を描画してみたいと思います。

キャンバスを使うことで四角形、円形などさまざまな形を描画することができます。

Canvasを使って丸を描画する方法

html

<canvas id="canvas"></canvas>

javascript

let canvas = document.getElementById('canvas');
let cv = canvas.getContext('2d');      
       
cv.strokeStyle = '#000';  // 線の色
cv.fillStyle = "#eee";  //塗りつぶしの色

cv.beginPath();
cv.arc(100, 100, 40, 0, Math.PI*2, false);
cv.stroke();
       
cv.beginPath();
cv.arc(200, 100, 40, 0, Math.PI*2, false);
cv.fill();     

今回は円形/丸の線を描画したものと塗りつぶした丸を描画したものになります。

補足

strokeStyle

strokeStyleは線の色を指定することができます。

beginPath

beginPath()はパスをリセットするときに使用します。

円を描画するときは.beginPath()と次に説明する.arc()を使用することを覚えておきましょう。

arc

円形/丸を描画するときに指定するメソッドになります。

srcの基本的な構文は下記になります。

arc(中心x座標, 中心y座標, 半径, 円弧の開始角, 円弧の終了角, 描画の方向)

円を描画する手順

円形/丸を描画するときは下記の手順になります。

• beginPathでパスを作成する
• arcで作画する
• strokeで描画する

サンプル