canvas要素でパスの接続している角(線結合)の形状を変更する

canvas要素でパスの接続している角(線結合)の形状を変更するには、context.lineJoinプロパティを使用します。

構文

context.lineJoin = joinValue;
joinValue 形状
設定可能な値は次を参照
設定可能な形状

設定可能な形状

サンプル画像 説明
'miter' 線の接続点(ポイント)を延長し結合され塗りつぶす(尖がる)
この指定はcanvas.miterLimitプロパティの影響を受ける(初期値)
'bevel' 線の接続点(ポイント)を三角形の計上で塗りつぶす
'round' 線の接続点(ポイント)を中心として円形に塗りつぶす

サンプルコード

HTML

<canvas width="150" height="150" id="sample"></canvas>

JavaScript

var canvasElem = document.getElementById('sample'),
    ctx        = canvasElem.getContext('2d');

ctx.beginPath();

ctx.lineWidth = 10;
ctx.lineJoin  = 'round';

ctx.moveTo(25, 125);
ctx.lineTo(25, 25);
ctx.lineTo(125, 25);
ctx.stroke();

JavaScript逆引きリファレンス一覧へ戻る