Canvas要素でグラフィックス描画を行う際、arc()メソッドを使用して円弧を描くことができます。この記事では、arc()メソッドの基本的な使い方から応用例まで、わかりやすく解説します。

arc()メソッドの基本的な使い方

arc()メソッドの構文は以下の通りです：

context.arc(x, y, radius, startAngle, endAngle, counterclockwise)

各パラメータの意味は以下の通りです：

  • x: 円の中心のX座標
  • y: 円の中心のY座標
  • radius: 円の半径
  • startAngle: 開始角度（ラジアン）
  • endAngle: 終了角度（ラジアン）
  • counterclockwise: 描画方向（省略可能、デフォルトはfalse）

基本的な円弧の描画例

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 円弧を描く
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI, false);
ctx.stroke();

円を描画する

完全な円を描くには、開始角度を0、終了角度を2πにします：

ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.stroke();

よくあるつまずきポイントと解決策

1. 円弧が表示されない

- beginPath()を忘れていないか確認

- stroke()またはfill()を実行しているか確認

2. 角度の計算

- ラジアンへの変換が必要（度数 × Math.PI / 180）

実践的な使用例

扇形の描画

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.arc(100, 100, 50, 0, Math.PI / 2);
ctx.lineTo(100, 100);
ctx.fill();

アニメーションの作成

let angle = 0;
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(100, 100, 50, 0, angle);
    ctx.stroke();
    angle += 0.1;
    requestAnimationFrame(animate);
}
animate();

まとめ

arc()メソッドを使用することで、円弧や円を簡単に描画することができます。基本的なパラメータを理解し、beginPath()とstroke()/fill()を適切に使用することが重要です。アニメーションや複雑な図形の作成にも応用できる便利なメソッドです。

実際の開発では、角度の単位や描画の順序に注意を払いながら使用してください。また、Canvas APIの他のメソッドと組み合わせることで、より複雑で魅力的なグラフィックスを作成することができます。