JavaScript»キャンバス»円弧を描くarc おうぎ形をかいてみる

ファイル名: js-canvas/quest_00074.html

下のソースコードをうつして、キャンバスに図のようなおうぎ形をかいてみましょう。

ソースコード

const canvas = document.getElementById("arc");
const context = canvas.getContext("2d");

context.beginPath();
context.moveTo(160, 160);
context.arc(160, 160, 50, Math.PI / 3, Math.PI);
context.closePath();

context.fillStyle = "rgb(255, 215, 0)";
context.fill();

解説

円のはじめの角度・おわりの角度を変えると、さまざまなおうぎ形になります。

 

JavaScriptでは、x軸の正方向から時計回りに角度が決まります。たとえば、
context.arc(160, 160, 50, 0, Math.PI);
とコードを書くと、円の下半分だけのようなおうぎ形になります。
いろいろな角度をためして、思い通りのおうぎ形がかけるように練習してみてください。