JavaScript: canvas に多角形を描画する

HTML5 Canvas API を使って、多角形(サンプルとして三角形)を描画します。

直線と同じように、多角形を描画する場合にもパス(Path)を利用します。 パスとは座標の集合で、このパスで管理された座標に従って多角形を描画します。

「パスを定義して、描画」という流れで描きます。 パスの定義とは、パスの宣言、座標の定義、パスのクローズまでのことです。(多角形の場合)

さっそくサンプルコードを見てみましょう。

サンプルコード: 多角形を描く

HTML・CSS


<canvas id="canvas"></canvas>

<style>
    canvas {
        border: 1px solid silver;
    }
</style>

JavaScript


var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');

// 三角形 1つ目
c.strokeStyle = 'red';  // 線の色
// パスの開始
c.beginPath();
c.moveTo(50, 50);
c.lineTo(20, 100);
c.lineTo(80, 100);
c.closePath();
// 描画
c.stroke();


// 三角形 2つ目
c.fillStyle = 'blue';  // 塗りつぶしの色
// パスの開始
c.beginPath();
c.moveTo(150, 50);
c.lineTo(120, 100);
c.lineTo(180, 100);
c.closePath();
// 描画
c.fill();

上のサンプルでは、三角形を2つ描画しています。1つ目は赤色の枠線の三角形、2つ目は青色で塗りつぶした三角形です。

枠線だけの場合は、stroke() メソッドを使い、塗りつぶす場合は fill() メソッドを使います。

多角形の場合は、最後(描画前)に closePath() メソッドでパスを閉じます。 closePath() メソッドを使用することで始点と終点が結ばれます。

このように始点と終点が結ばれたパスのことをクローズパスといい、 始点と終点が結ばれていないパスのことをオープンパスといいます。

枠線の色は strokeStyle プロパティで設定し、 塗りつぶしの色は fillStyle プロパティで設定します。

JavaScript入門