【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();
}
以下の様な結果が得られます。
弧を表す関数が以下の通りです。
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のことまでわかりやすく説明されていて初心者にオススメです！)
おしまい
