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 プロパティで設定します。