CanvasRenderingContext2D: lineCap プロパティ

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

CanvasRenderingContext2D.lineCap はキャンバス 2D API のプロパティで、描く線の端点の形状を設定します。

メモ: 線は stroke()、strokeRect()、strokeText() の各メソッドで描画されます。

値

以下のいずれかです。

"butt": 端点が四角く切られます。既定値です。
"round": 端点が丸くなります。
"square": 端点は、線の太さと同じ幅、半分の高さのボックスが追加されて四角くなります。

例

線の先端の形を変える

この例では直線の端点を丸めています。

HTML

html

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

JavaScript

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

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineWidth = 15;
ctx.lineCap = "round";
ctx.lineTo(100, 100);
ctx.stroke();

結果

先端形状の比較

次の例では、lineCap プロパティがそれぞれ異なる 3 本の線を描画しています。その違いを観察するために、 2 本の補助線を引いています。 3 本の線はそれぞれこの補助線直上を始点および終点として描かれています。

左の線は既定のオプションである "butt" の場合の線で、補助線のところで丁度切れています。 2 つ目の"round" オプションの場合の線は、補助線の部分の先に半円が追加された格好になっています。右側の"square" オプションによる描線は、線の幅と同じ幅で高さが半分の四角形が追加されています。

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

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

// Draw guides
ctx.strokeStyle = "#09f";
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(140, 10);
ctx.moveTo(10, 140);
ctx.lineTo(140, 140);
ctx.stroke();

// Draw lines
ctx.strokeStyle = "black";
["butt", "round", "square"].forEach((lineCap, i) => {
  ctx.lineWidth = 15;
  ctx.lineCap = lineCap;
  ctx.beginPath();
  ctx.moveTo(25 + i * 50, 10);
  ctx.lineTo(25 + i * 50, 140);
  ctx.stroke();
});

仕様書

仕様書
HTML # dom-context-2d-linecap-dev

ブラウザーの互換性

WebKit/Blink 特有のメモ

WebKit および Blink ベースのブラウザーでは、このプロパティに加えて標準外で非推奨のメソッド ctx.setLineCap() が実装されています。

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2024年7月28日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告