ゼロからわかる現代JavaScript

ここは、ふぇりあ１６歳が不定期に連載しているオンライン小説のページです。

VNIふぇりあ16歳へ

ゼロからわかる現代JavaScript

３４．円の連続描画。「canvas」

*最新のIE9が必要です。

前回と同じく円とcanvasについてです。

今度は円を連続して描画してみましょう

ポイントは

・beginPath

メソッドを使い、円を描画するごとに

パス

を生成することが必要になります。

（パスというのは、adobe illustratarなどで有名な
ベクターグラフィックの線や曲線、ベジェ曲線を示します。）

円を一回一回生成するのには

それぞれ独立したパスを作ることが必要になるのです。

今回使用するソースコード

function main() {
　　//キャンバス要素の作成
　　var canvas = document.createElement("canvas");
　　//bodyに要素の追加
　　document.body.appendChild(canvas);

　　//コンテキストを取得 2dは2D描画の意味
　　var ctx = canvas.getContext("2d");

　　//円弧の終点の角度
　　var EANG = 360 * Math.PI/180;

　　//パス1を生成
　　ctx.beginPath();
　　ctx.arc(80, 50, 40, 0, EANG, false);
　　ctx.fillStyle = "#00FF00";
　　ctx.fill();
　　ctx.stroke();

　　//パス2を生成
　　ctx.beginPath();
　　ctx.arc(40, 100, 40, 0, EANG, false);
　　ctx.fillStyle = "#FF0000";
　　ctx.fill();
　　ctx.stroke();

　　//パス3を生成
　　ctx.beginPath();
　　ctx.arc(110, 100, 40, 0, EANG, false);
　　ctx.fillStyle = "#0000FF";
　　ctx.fill();
　　ctx.stroke();
}

実行結果

コラム：

グラフィックを扱うメソッドはC言語（コンソール）には
あまりなじみの無いものですが
Windowsなどのフォームプログラミングになると
おおく使われるものです。