円を描く方法

2017/08/03

Canvasで円を描くには、コンテキストのarc()を利用しましょう。

サンプルコード

座標(100,100)を中心に、半径50の円を描くサンプルコードです。開始角度と終了角度はラジアン単位で指定しなければいけません。0度は円の中心の右側で、そこから終了角度まで時計回りに描くか、反時計回りに描くかを指定できます。塗りつぶしは開始座標と終了座標を結んだ枠内が対象で、パックマンのようにはなりません。

JavaScript

// element = <canvas width="200" height="200"></canvas>
var context = element.getContext( "2d" ) ;

// パスをリセット
context.beginPath () ;

// 円の中心座標: (100,100)
// 半径: 50
// 開始角度: 0度 (0 * Math.PI / 180)
// 終了角度: 360度 (360 * Math.PI / 180)
// 方向: true=反時計回りの円、false=時計回りの円
context.arc( 100, 100, 50, 0 * Math.PI / 180, 360 * Math.PI / 180, false ) ;

// 塗りつぶしの色
context.fillStyle = "rgba(255,0,0,0.8)" ;

// 塗りつぶしを実行
context.fill() ;

// 線の色
context.strokeStyle = "purple" ;

// 線の太さ
context.lineWidth = 8 ;

// 線を描画を実行
context.stroke() ;

デモ

開始角度、終了角度、方向(時計回りか反時計回り)の指定がどのように作用するのか、コードを編集して確認してみましょう。

塗りつぶしと線

// element = <canvas id="target" width="200" height="200"></canvas>
var element = document.getElementById( "target" ) ;
var context = element.getContext( "2d" ) ;

context.beginPath () ;

context.arc( 100, 100, 50, 0 * Math.PI / 180, 360 * Math.PI / 180, false ) ;
context.fillStyle = "rgba(255,0,0,0.8)" ;
context.fill() ;

context.strokeStyle = "purple" ;
context.lineWidth = 8 ;
context.stroke() ;

200x200のキャンパスです。

塗りつぶし

// element = <canvas id="target" width="200" height="200"></canvas>
var element = document.getElementById( "target" ) ;
var context = element.getContext( "2d" ) ;

context.beginPath () ;

context.arc( 100, 100, 50, 0 * Math.PI / 180, 360 * Math.PI / 180, false ) ;
context.fillStyle = "rgba(255,0,0,0.8)" ;
context.fill() ;

200x200のキャンパスです。

線

// element = <canvas id="target" width="200" height="200"></canvas>
var element = document.getElementById( "target" ) ;
var context = element.getContext( "2d" ) ;

context.beginPath () ;

context.arc( 100, 100, 50, 0 * Math.PI / 180, 360 * Math.PI / 180, false ) ;
context.strokeStyle = "blue" ;
context.lineWidth = 1 ;
context.stroke() ;

200x200のキャンパスです。