tamakipedia

鎌倉でフロントエンドエンジニアをしています。Wordpress/Javascript/JQuery が得意で、現在React勉強中です!

【canvas】ctx.arc()を使って円を描画する

こんにちは。

今日はcanvasについて、
arcという関数を使って円を描画する仕組みを説明していきます。

手順

・html

<body onload="init()">
  <canvas id="canvas" width="600" height="400"></canvas>
</body>

・js

function init() {
  var canvas =  document.getElementById("canvas");
  ctx = canvas.getContext("2d");
  ctx.strokeStyle = "skyblue";
  ctx.fillStyle = "darkblue";
  ctx.lineWidth = 2;
    
  ctx.beginPath();
  ctx.arc(100, 50, 30, 0, 2*Math.PI);
  ctx.closePath();
  ctx.fill();
}

以下の様な結果が得られます。
f:id:okinawanpizza:20201123074009p:plain

弧を表す関数が以下の通りです。

ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);

x,y = 円の中心点の座標
radius = 半径
startAngle, endAngle = 円弧の開始角, 終了角
anticlockwise = 時計回りか反時計回りか (true = 反時計)

Math.PI

Math.PI、いわゆるπのことです。
小さい頃に習った、 360度 = 2πラジアンをコードでも表せますよーといったプロパティーです。

2 * Math.PI = 360度  
Math.PI / 3 = (180 / 3)度 = 60度  
-1 * Math.PI / 2 = -(90)度 = 270度  

という風に角度を求めることができます。

つまり先ほどの円弧を表す関数

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

は、0から2*Math.PI(360度)にかけて円弧を書いていきますよーという意味になる。

他にもスタートからゴールの角度を変えてみたり、
線を描画するか、中身を埋めるなどによって様々な形を表現することができます。
https://codepen.io/ulqvhvox/pen/WNxzYVv?editors=1010

おしまい

ちなみに
(arc~ のコードをctx.strokeRect(50,30,100,50)に変えると四角になります。)

余談

最近はwebGLの学習を始めつつ、
Javascriptの基礎の部分の学習を始めたところです。

ゲームで学ぶJavaScript入門 HTML5&CSSも身につく! | 田中 賢一郎 | プログラミング | Kindleストア | Amazon
↑↑↑
この本読み始めました。
(HTMLからcanvasのことまでわかりやすく説明されていて初心者にオススメです!)

おしまい