HTML Referenzhandbuch

Vollständige Liste der HTML-Tags

HTML canvas lineCap-Eigenschaft

lineCap ist ein Canvas 2D API definiert, wie jede Linienenden gezeichnet wird. Es gibt3möglichen Werten,分别是：butt, round und square. Der Standardwert ist butt.

HTML canvas Reference Manual

Online-Beispiel

Zeichnen Sie drei Linien mit den Endkappen (butt, round, square):

JavaScript:

Beispiel

<!DOCTYPE html>
<html>
<head>
<title>Verwendung der HTML canvas lineCap-Eigenschaft (Grundlagen-Tutorial von oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px fest #d3d3d3>
Ihr Browser unterstützt keine HTML5　canvas-Tag.
</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>

Test See ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome and Safari support the lineCap property.

Note:Internet Explorer 8 And earlier versions do not support the <canvas> element.

Definition and Usage

The lineCap property sets or returns the cap style of a line.

Note:"round" and "square" values will make the line slightly longer.

Default Value:	butt
JavaScript Syntax:	Context.lineCap="butt\|round\|square";

Attribute Value

Value	Description
butt	Default. Add straight edges to each end of the line.
round	Add round line caps to each end of the line.
square	Add square line caps to each end of the line.

HTML canvas Reference Manual

HTML: <template> Tag