HTML リファレンスマニュアル

HTML タグ一覧

HTML: <template> タグ

HTML canvas lineCap 属性

lineCap は Canvas 2D API は各線の末端の描画方法を指定する属性です。以下にあります：3の可能な値がそれぞれです：butt、round、square。デフォルト値は butt です。

HTML canvas 参考マニュアル

オンラインサンプル

を描画する 3本の線（butt、round、square）を端部に端蓋を持たせる：

JavaScript：

サンプル

<!DOCTYPE html>
<html>
<head>
<title>HTML canvas lineCap 属性の使用(基本チュートリアルウェブ oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
あなたのブラウザは HTML5　canvas タグ。
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth =　10;
ctx.lineCap = "butt";
ctx.moveTo(20,　20);
ctx.lineTo(200,　20);
ctx.stroke();
ctx.beginPath();
ctx.lineCap = "round";
ctx.moveTo(20,　40);
ctx.lineTo(200,　40);
ctx.stroke();
ctx.beginPath();
ctx.lineCap = "square";
ctx.moveTo(20,　60);
ctx.lineTo(200,　60);
ctx.stroke();
</script>
</body>
</html>

テストして見て‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome および Safari は lineCap 属性をサポートしています。

注意：Internet Explorer 8 及びその以前のバージョンでは <canvas> 要素をサポートしていません。

定義と用法

lineCap属性は、線の端のスタイルを設定または返します。

注意："round" と "square" の値は線が少し長くなります。

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

属性値

値	説明
butt	デフォルト。線の各端に直線的なエッジを追加します。
round	線の各端に円形の線帽を追加します。
square	線の各端に正方形の線帽を追加します。

HTML canvas 参考マニュアル

HTML: <template> タグ