CanvasRenderingContext2D: lineCap 属性
Canvas 2D API 的 CanvasRenderingContext2D.lineCap 属性决定了绘制线条端点的形状。
注意： 可以使用 stroke()、strokeRect() 和 strokeText() 方法绘制线条。
值
以下之一：
示例
更改线帽的形状
此示例将直线端点的形状设置为圆形。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
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 属性值。添加了两条辅助线，以清晰显示三者之间的确切差异。每条线都精确地开始和结束于这些辅助线上。
最左边的线使用了默认的 "butt" 选项。它完全与辅助线齐平。第二条线设置为使用 "round" 选项。这会在端点处添加一个半圆，其半径等于线宽的一半。最右边的线使用了 "square" 选项。这会添加一个宽度等于线粗细、高度为其一半的方框。
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Draw guides
ctx.strokeStyle = "#0099ff";
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()。