HTML canvas lineCap プロパティ

例

丸いエンドキャップを持つ線を描画します：

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineCap="round";
ctx.moveTo(20,20);
ctx.lineTo(200,20);
ctx.stroke();

Try it Yourself ❯

ブラウザ・サポート

表中の数字は、プロパティを完全にサポートした最初のブラウザ・バージョンを指定しています。

プロパティ
lineCap	Yes	9.0	Yes	Yes	Yes

定義と用法

lineCap プロパティは、線のエンドキャップのスタイルを設定または返します。

注: 値の "round" と "square" を使用すると、線はわずかに長くなります。

デフォルト値：	butt
JavaScript 構文：	context.lineCap="butt\|round\|square";

プロパティの値

値	説明	Play it
butt	デフォルト。デフォルト。平らなエッジが、線の両端に付加される	Play it ❯
round	丸いエンドキャップが線の両端に付加される	Play it ❯
square	四角いエンドキャップが線の両端に付加される	Play it ❯

HTML Canvas リファレンス