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');

// パスの開始
c.beginPath();
// 起点
c.moveTo(50, 100);
// 終点
c.lineTo(250, 100);
// 描画
c.stroke();

上のコードでは、点(50, 100)から点(250, 100)に向かって直線を描いています。

まず beginPath() メソッドでパスを開始します。 次に moveTo() メソッドで始点に移動し、lineTo() メソッドで終点を定義します。 ここまでがパスの定義です。

最後に stroke() メソッドで、先程定義したパスに基づいて描画します。 このstroke() メソッドがないと描画されませんので注意してください。

パスを定義して、描画」というのが大まかな流れになります。

上のサンプルでは1本の直線を描きましたが、次は複数の直線を描いてみます。

サンプルコード: 複数の直線

HTML・CSS は省略して、JavaScript 部分のみ記述します。

JavaScript


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

// 線の色
c.strokeStyle = 'red';

// パスの開始
c.beginPath();
// 1本目
c.moveTo(50, 40);
c.lineTo(250, 40);
// 2本目
c.moveTo(50, 80);
c.lineTo(250, 80);
// 3本目
c.moveTo(50, 120);
c.lineTo(250, 120);
// 描画
c.stroke();

今回のコードでは3本の直線(赤色)を描いています。 motoTo() メソッドと lineTo() メソッドを繰り返すことで複数の直線を描きます。

線の色を指定するには strokeStyle プロパティで指定します。

次は折れ線を描いてみます。

サンプルコード: 折れ線

JavaScript


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

// 線の色
c.strokeStyle = 'blue';

// パスの開始
c.beginPath();
// 折れ線
c.moveTo(50, 30);
c.lineTo(250, 30);
c.lineTo(50, 120);
c.lineTo(250, 120);

// 描画
c.stroke();

今回はローマ字のZのような折れ線を描いています。

moveTo() メソッドで始点を設定し、lineTo() メソッドで点を結んでいきます。 このようにlineTo() メソッドを繋げて記述することで折れ線を描画できます。

まとめとして、直線や折れ線を描画する場合は、 「パスを定義して、描画」という流れを覚えて置いてください。

JavaScript入門