ブログデザイン備忘録～canvasによる直線描画

1. 基本的な直線描画
2. 直線を用いた図形描画
3. 直線の書式設定
4. まとめ

　前回はcanvasとjavascriptを用いてWeb上に描画を行う方法について紹介したが、今回は直線の描画方法について紹介する。

atatat.hatenablog.com

1. 基本的な直線描画

　まずcanvas要素とjavascript関数を用いて直線を描画する方法について説明する。

<canvas width="300" height="150" id="canv_lin1" style="background-color:yellow;"></canvas>

<script>
var canvas = document.getElementById('canv_lin1');
if (canvas.getContext) {
    var context = canvas.getContext('2d');
    context.moveTo(0,0); //線の開始点座標を指定
    context.lineTo(150,75);
    context.stroke(); //描画を指示する
}
</script>

描画を行うcanvas要素を生成しidを"canv_lin1"とする。javascriptの記述では線の開始点の座標を指定（移動）するためにmoveTo(X0,Y0)を使用する。座標の基準は左上となりcontext.moveto(0,0)は左上の座標を意味する。次に座標の開始点から終点まで線を引くにはlineTo(X1,Y1)を使用する。X1,Y1は終点の座標を意味する。ここでは(0,0)からcanvasの中心点である(150,75)に線を引くためlineTo(150,75)とする。この状態では線は設定されているが描画されていないので、描画（表示）を指示するためcontext.stroke()とすると線がcanvas上に描画される。

2. 直線を用いた図形描画

　直線を組み合わせて図形を描画することもできる。以下は直線を用いて三角形を描画するjavascriptコードになる。

<canvas width="300" height="150" id="canv_lin2" style="background-color:yellow;"></canvas>

<script>
var canvas = document.getElementById('canv_lin2');
if (canvas.getContext) {
    var context = canvas.getContext('2d');
    context.beginPath(); //パス(点)の初期化
    context.moveTo(100,20); //線の開始点座標を指定
    context.lineTo(150,100);
    context.lineTo(50,100); 
    context.closePath(); // context.lineTo(100,20);の代わり
    context.stroke(); //描画を指示する
}
</script>

　図形を描画するには図形の頂点座標同士をmoveToやlineToを用いて繋いでいけばよいが、点の座標情報をパスという形で管理すると便利である。パス（点情報）の初期化をbeginPath()で実行し、パスの終了をclosePath()で閉じる。最後、図形を閉じるところでlineToを用いる場合は最初の開始点を指定する必要があるが、closePath()を用いれば開始点に向かって線を自動で引いてくれる。

3. 直線の書式設定

　描画に用いる直線の書式設定を行うこともできる。下は直線の幅と色を設定している。

<canvas width="300" height="150" id="canv_lin3" style="background-color:yellow;"></canvas>

<script>
var canvas = document.getElementById('canv_lin3');
if (canvas.getContext) {
    var context = canvas.getContext('2d');
    context.moveTo(0,0); //線の開始点座標を指定
    context.lineTo(150,75);
    context.lineWidth = 10;
    context.strokeStyle = "red";
    context.stroke(); //描画を指示する
}
</script>

幅の指定はcontext.lineWidthで数値を指定する。また線色についてはcontext.strokeStyleで色を"rgb(R,G,B)", カラー名またはカラーコードで指定することができる。

線幅、色以外に終端形状を指定することができる。終端形状はlineCapでbutt(デフォルト), roundまたはsquareを指定できる。

<canvas width="300" height="150" id="canv_lin4" style="background-color:yellow;"></canvas>

<script>
var canvas = document.getElementById('canv_lin4');
if (canvas.getContext) {
    var context = canvas.getContext('2d');
 context.lineWidth = 20;

    //「ラインキャップ無し」の場合
    context.lineCap = "butt";
    context.beginPath();
    context.moveTo(20,20);
    context.lineTo(280,20);
    context.stroke();

    //「丸いラインキャップ」の場合
    context.lineCap = "round";
    context.beginPath();
    context.moveTo(20,60);
    context.lineTo(280,60);
    context.stroke();

    //「四角いラインキャップ」の場合
    context.lineCap = "square";
    context.beginPath();
    context.moveTo(20,100);
    context.lineTo(280,100);
    context.stroke();
}
</script>

終端形状をなし(デフォルト)、丸、四角で指定した実行例を以下に示す。線幅が細い場合は見分けがつかないので、線幅が太い場合に目立たせることができる。

三角形の頂点のように線同士が重なった場合の処理はlineJoinを用いて指定することができる。処理としては面取り:bevel、丸める:round、面取りなし(デフォルト):miterが指定できる。

<canvas width="300" height="150" id="canv_lin5" style="background-color:yellow;"></canvas>

<script>
var canvas = document.getElementById('canv_lin5');
if (canvas.getContext) {
    var context = canvas.getContext('2d');
     context.lineWidth = 20;
    //折れ線部分を面取りする場合
    context.lineJoin = "bevel";
    context.beginPath();
    context.moveTo(10,100);
    context.lineTo(50,40);
    context.lineTo(90,100);
    context.stroke();

    //折れ線部分を丸くする場合
    context.lineJoin = "round";
    context.beginPath();
    context.moveTo(110,100);
    context.lineTo(150,40);
    context.lineTo(190,100);
    context.stroke();

    //折れ線部分を面取りしない場合
    context.lineJoin = "miter";
    context.beginPath();
    context.moveTo(210,100);
    context.lineTo(250,40);
    context.lineTo(290,100);
    context.stroke();
}
</script>