CanvasRenderingContext2D：lineDashOffset 属性

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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]);

// 无偏移量的虚线
ctx.beginPath();
ctx.moveTo(0, 50);
ctx.lineTo(300, 50);
ctx.stroke();

// 偏移量为 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();

规范

Specification
HTML Standard
# dom-context-2d-linedashoffset-dev

浏览器兼容性

BCD tables only load in the browser

参见