ゼロからわかる現代JavaScript

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

VNIふぇりあ16歳へ

ゼロからわかる現代JavaScript

３５．パスと三角形の描画。「canvas」

*最新のIE9が必要です。

今度は三角形を描画してみましょう

パスを作成し

二点の座標に線を引きます。

でも二点しかありません。

変ですね三角形は三点のはずです。

そこで

・closePath

をつかい「パスを閉じる」ことをします。

するとどうでしょう。終点と始点が線で結ばれ
見事に三角形ができあがりす。

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

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

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

　　//パス1を生成
　　ctx.beginPath();
　　ctx.moveTo(0, 100);
　　ctx.lineTo(70, 0);
　　ctx.lineTo(140, 100);
　　ctx.closePath();

　　ctx.stroke();
}

実行結果

コラム：

パスはベクターグラフィックを勉強するとさらによく分かると思います。