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();