JavaScript入門[HTML5編]線幅・形状を指定する

線の幅・形状を指定する命令文

最初に、線の幅や形状を指定する命令文を見ておきましょう。

content.lineWidth

線幅を指定します。単位はピクセル。

content.lineCap

線の端の形状を指定します。

butt　線の端まで描画します。

round　線の端を丸めます。

square　線の端を四角にします。buttより長くなります。

cntent.lineJoin

線の連結部分の形状を指定します。

bevel　連結部分を平らにします。

round　連結部分を丸くします。

miter　鋭角の連結部分を尖らせる場合に指定します。

content.miterLimit

連結部分を尖らせる限界を指定します。

ではこれらを実際に指定して線を描いてみることにしましょう。

線の幅と端を指定してみる

最初に線幅と線端の指定をしてみたいと思います。 以下のサンプルでは３本の線を描きます。幅は20ピクセルと太めに設定します。 線の端がどうなるか確認なさってください。

<canvas id="cv" width="360" height="240"></canvas>

<script>
var ctx = document.getElementById("cv").getContext("2d");

ctx.lineWidth = 20;  //線の太さを20ピクセルに指定

ctx.beginPath();
ctx.lineCap = "butt";  //線の端まで描画
ctx.moveTo(180,40);
ctx.lineTo(180,200);
ctx.stroke();

ctx.beginPath();
ctx.lineCap = "round";  //線の端を丸くする
ctx.moveTo(100,40);
ctx.lineTo(100,200);
ctx.stroke();

ctx.beginPath();
ctx.lineCap = "square";  //線の端を四角にする
ctx.moveTo(260,40);
ctx.lineTo(260,200);
ctx.stroke();
</script>

＜描画結果＞canvasタグにはCSSで二重線の枠を付けています

真ん中が「butt」で左が「round」、右が「square」です。Y座標は全て40～200で同じですが、 buttとsquareでは長さが違うのを確認できると思います。

連結部分の形状の指定

続いて線の連結部分の形状を指定する方法を見ていきましょう。 Ｖ字と逆Ｖ字を交互に並べて描き、その連結部分の形状を一つずつ変えてみます。

<canvas id="cv2" width="360" height="240"></canvas>

<script>
var ctx2 = document.getElementById("cv2").getContext("2d");

ctx2.lineWidth = 20;
ctx2.lineCap = "bett";

ctx2.beginPath();
ctx2.moveTo(20,40);
ctx2.lineTo(60,200);
ctx2.lineJoin = "bevel";  //連結部を平らにします
ctx2.lineTo(100,40);
ctx2.stroke();

ctx2.beginPath();
ctx2.moveTo(100,200);
ctx2.lineTo(140,40);
ctx2.lineJoin = "round";  //連結部を丸くする
ctx2.lineTo(180,200);
ctx2.stroke();

ctx2.beginPath();
ctx2.moveTo(180,40);
ctx2.lineTo(220,200);
ctx2.lineJoin = "miter";  //連結部をmiter表示する（限界値2）
ctx2.miterLimit= 2;
ctx2.lineTo(260,40);
ctx2.stroke();

ctx2.beginPath();
ctx2.moveTo(260,200);
ctx2.lineTo(300,40);
ctx2.lineJoin = "miter";  //連結部をmiter表示する（限界値10）
ctx2.miterLimit= 10;
ctx2.lineTo(340,200);
ctx2.stroke();
</script>

＜描画結果＞canvasタグにはCSSで二重線の枠を付けています

左から順に、bevel，round，miter表示が２つ並んでいます。 miterの限界値が小さいと、面取りされているのが判ると思います。