CanvasRenderingContext2D：lineCap 属性

基线 广泛可用

此功能已得到良好建立，并在许多设备和浏览器版本中都能正常工作。它从以下版本开始在浏览器中可用： 2015 年 7 月.

Canvas 2D API 的CanvasRenderingContext2D.lineCap属性确定用于绘制线条端点的形状。

注意：可以使用stroke()、strokeRect()和strokeText()方法绘制线条。

值

以下选项之一

"butt"

线条的末端在端点处被截断。默认值。

"round"

线条的末端为圆形。

"square"

线条的末端通过添加一个与线条粗细宽度相等、高度为线条粗细一半的方框来截断。

示例

更改线条端帽的形状

此示例将直线的端帽设置为圆形。

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 = "#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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

  • 在基于 WebKit 和 Blink 的浏览器中，除了此属性之外，还实现了非标准且已弃用的方法ctx.setLineCap()。

另请参阅