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

ツール・書籍紹介

まとめ・一覧

基本編

数値

文字列

正規表現

日付・時刻

配列

関数

オブジェクト指向

DOM操作

API

便利な小技集

用語

実践編

関連サイト