canvas要素でパスの始点あるいは終点の形状を変更する

canvas要素でパスの始点あるいは終点の形状を変更するには、context.lineCapプロパティを使用します。

構文

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

設定可能な形状

サンプル画像 説明
'butt' 線の端点(ポイント)を四角形にする(初期値)
'round' 線の端点(ポイント)を中心として円形にする
'square' 線の端点(ポイント)を中心として四角形にする

サンプルコード

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.lineCap   = 'round';

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

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