CanvasRenderingContext2D：lineDashOffset 属性

基线 广泛可用

此功能已得到良好建立，并且可以在许多设备和浏览器版本中使用。它自以下时间起在所有浏览器中都可用： 2015 年 7 月.

Canvas 2D API 的CanvasRenderingContext2D.lineDashOffset属性设置线段虚线偏移量或“相位”。

注意：通过调用stroke()方法绘制线条。

值

一个浮点数，指定线段虚线偏移量。默认值为0.0。

示例

偏移线段虚线

此示例绘制两条虚线。第一条没有虚线偏移量。第二条的虚线偏移量为 4。

HTML

html
<canvas id="canvas"></canvas>

JavaScript

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.setLineDash([4, 16]);

// Dashed line with no offset
ctx.beginPath();
ctx.moveTo(0, 50);
ctx.lineTo(300, 50);
ctx.stroke();

// Dashed line with offset of 4
ctx.beginPath();
ctx.strokeStyle = "red";
ctx.lineDashOffset = 4;
ctx.moveTo(0, 100);
ctx.lineTo(300, 100);
ctx.stroke();

结果

具有虚线偏移量的线段以红色绘制。

蚂蚁线

“蚂蚁线”效果是一种动画技术，通常在计算机图形程序的选择工具中找到。它通过动画化边框来帮助用户区分选择边框和图像背景。

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let offset = 0;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.setLineDash([4, 2]);
  ctx.lineDashOffset = offset;
  ctx.strokeRect(10, 10, 100, 100);
}

function march() {
  offset++;
  if (offset > 5) {
    offset = 0;
  }
  draw();
  setTimeout(march, 20);
}

march();

规范

规范
HTML 标准
# dom-context-2d-linedashoffset-dev

浏览器兼容性

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

另请参阅