JavaScript入門[HTML5編]直線・多角形を描く

2Dを描くためのスクリプト

前のページで、Internet Explorer対策の「excanvas.js」の読み込みと、 idの付いたcanvasタグを記述することを説明しました。 まずはそこまで完成させましょう。

ではこのcanvasに図形を描くためのソースを見てみましょう。

var cvs = document.getElementById("cv");
var ctx = cvs.getContext("2d");

document.getElementById()で、id名「cv」の付いたcanvas要素を取得し、変数cvsに代入しています。 次にそのcanvasに2D（平面）で描くための命令が続きます。それがgetContext("2d")です。 カッコ内は小文字で書く点に注意してください。

canvas.getContext("2d")

指定したcanvasに二次元の図を描いていきます。

直線を描く

続いて直線を引くスクリプトを見ていきましょう。 直線を描くには、パス「Path」という表現を用います。 パスを用いた描画の流れを見てみましょう。

context.beginPath()

Pathで描画を開始する旨を宣言します。

また、以前指定したPathがあれば、それをリセットします。

context.moveTo(X座標,Y座標)

描画する最初の位置を指定します。

context.lineTo(X座標,Y座標)

指定した座標まで線分を伸ばします。

context.stroke()

Canvas上に直線（多角形の場合は輪郭線）を描画します。

以上をスクリプト上に記述してみましょう。スクリプトはcanvasタグの後に記述してください。 スクリプトが先だと、私の環境ではエラーが出ました。

<canvas id="cv" width="360" height="240"></canvas>

<script>
var cvs = document.getElementById("cv");
var ctx = cvs.getContext("2d");

ctx.beginPath();     // 1.Pathで描画を開始する
ctx.moveTo(100,100); // 2.描画する位置を指定する
ctx.lineTo(200,200); // 3.指定座標まで線を引く
ctx.stroke();        // 4.Canvas上に描画する
</script>

＜描画結果＞canvasタグにはCSSで二重線の枠を付けています

多角形を描く

多角形は、直線を複数繋げて描いていきます。 ですから上のスクリプトが理解できていれば、簡単に描けます。 あと追加で、二つの命令文を見ておきましょう。

context.closePath()

MoveTo()で指定した最初の座標に向け輪郭線を伸ばします。

context.fill()

多角形の場合、内側を塗りつぶしてCanvas上に描画します。

以下のスクリプトで、中身を塗りつぶした三角形を書くことができます。

<canvas id="cv2" width="360" height="240"></canvas>

<script>
var cvs2 = document.getElementById("cv2");
var ctx2 = cvs2.getContext("2d");

ctx2.beginPath();
ctx2.moveTo(100,100);
ctx2.lineTo(200,200);
ctx2.lineTo(220,80);   //直線を追加して三角形にします。
ctx2.closePath();  //moveTo()で指定した始点に向けて線を引き、領域を閉じます。
ctx2.fill();  //stroke()では輪郭線を描き、fill()にすると中を塗りつぶします。

＜描画結果＞canvasタグにはCSSで二重線の枠を付けています

このようにlineTo()を使えば、一筆書きで図形を描いていけます。 星型や、もっと複雑なものにも是非チャレンジしてみてください。