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

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

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

ソースコード

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

context.beginPath();
context.arc(160, 160, 50, 0, Math.PI * 2);
context.closePath();

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

解説

円をかくには、中心の位置・半径の長さ・はじめとおわりの角度をきめましょう。

arc()で決める角度は普段使っている”度数法”とは別の測り方である”ラジアン角”というものを使います。
JavaScriptでは”Math.PI”が”1ラジアン”ということになります。
また、”1ラジアン=180度”が成り立ちますのでうまく活用しましょう!!