canvas上に直線・多角形を描画する方法を解説

HOME
更新日:2013.12.03
HOMEJavaScript入門(HTML5編) > 直線・多角形を描く

直線・多角形を描く-JavaScript入門(HTML5編)

このページから、実際にCanvasに図を描いていきます。 まずは基本的な直線と、それを結び合わせた多角形の描き方を見ていきましょう。

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()を使えば、一筆書きで図形を描いていけます。 星型や、もっと複雑なものにも是非チャレンジしてみてください。