canvasで直線の線幅・形状を指定する方法を解説

HOME
更新日:2013.12.03
HOMEJavaScript入門(HTML5編) > 線幅・形状を指定する

線幅・形状を指定する-JavaScript入門(HTML5編)

これまででPathを使って線や円を描く方法を見てきました。 このページでは線の幅や端の形状、連結部分の形状を指定する方法を見ていきます。

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

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

content.lineWidth
線幅を指定します。単位はピクセル。
content.lineCap
線の端の形状を指定します。
butt 線の端まで描画します。
round 線の端を丸めます。
square 線の端を四角にします。buttより長くなります。
cntent.lineJoin
線の連結部分の形状を指定します。
bevel 連結部分を平らにします。
round 連結部分を丸くします。
miter 鋭角の連結部分を尖らせる場合に指定します。
content.miterLimit
連結部分を尖らせる限界を指定します。

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

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

最初に線幅と線端の指定をしてみたいと思います。 以下のサンプルでは3本の線を描きます。幅は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では長さが違うのを確認できると思います。

連結部分の形状の指定

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

<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表示が2つ並んでいます。 miterの限界値が小さいと、面取りされているのが判ると思います。