JavaScriptのCanvas APIのlineCapプロパティを指定し、線の端（端点）のスタイルを設定する方法を解説します。

目次 [ close ]
  1. 下準備
  2. lineCapプロパティで線の端点のスタイルを指定
  3. それぞれの比較

下準備

まずは下準備から。htmlの<body></body>内に以下のcanvas要素を配置します。

<canvas id="canvas"></canvas>

jsにてコンテキストを取得します。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas

画像ではキャンバスの範囲がわかりやすいようにcssにて背景色を設定してあります。

lineCapプロパティで線の端点のスタイルを指定

まずは線を描画します。

ctx.lineWidth = 8;
ctx.moveTo(20, 20);
ctx.lineTo(120, 20);
ctx.stroke();
線を描画

lineCapプロパティで線の端点のスタイルを指定することができます。文字列でbutt、round、squareの何れかを取ります。既定値はbuttです。lineWidthの指定の下に以下の行を追加します。

ctx.lineCap = 'round';
lineCapをroundに設定

roundは端点を丸めます。続いてsquare

ctx.lineCap = 'square';
lineCapをsquareに設定

squareは短点に線の太さの半分の長さを追加します。

それぞれの比較

違いが分かりやすいようにlineCapの値の比較を示します。

まずは比較のためのガイド線を描画します。下準備の後、以下のコードを追加します。

ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.moveTo(40, 20);
ctx.lineTo(40, 130);
ctx.moveTo(260, 20);
ctx.lineTo(260, 130);
ctx.stroke();
左右に赤のガイド線

各スタイルの線を描画するため以下のコードを追加します。

ctx.strokeStyle = '#000';
ctx.lineWidth = 8;
['butt', 'round', 'square'].forEach((lineCap, i) => {
  ctx.lineCap = lineCap;
  ctx.beginPath();
  ctx.moveTo(40, i * 20 + 40);
  ctx.lineTo(260, i * 20 + 40);
  ctx.stroke();
});
ガイド線の端から端にかけて3本の異なるスタイルの線を描画

上から、butt、round、squareの順に描画されました。ガイド線の端から端にかけて線を引いているため、roundとsquareが線の太さの半分の長さ分延長されているのがわかります。