← Canvas 线段样式 setLineDash() Canvas 线条末端样式 lineCap →

Canvas 虚线样式的起始偏移量

什么叫做线段起始偏移量呢？

线段起始偏移量就是线段样式整体左移或者右边移动的距离

假设我们使用 setLineDash([1,2,3]) 设置了虚线样式

偏移量是设定的值与 setLineDash() 中 segment 参数的总和的余数

也就是 偏移量 = 设定的值 % (1+2+3) = 设定的值 % 6
如果设定的是正整数，则往左边移动

例如原本的虚线样式为
```
[1,2,3,1,2,3,1,2,3,1,2,3....]
```
如果设定偏移量为 2 ,那么就会变成以白色开头的
```
[1,3,1,2,3,1,2,3,1,2,3....]
```
如果设定的是负整数，则往右边移动
```
[1,2,3,1,2,3,1,2,3,1,2,3....]
```
如果设定偏移量为 -2 ,那么就会变成以白色开头的
```
[2,3,1,2,3,1,2,3,1,2,3....]
```
为什么还能往右边移动呢？往右边移动时会自动往左边填充一个 segment

相当于左边又多出了一个 [1,2,3]

例如，setLineDash([1,2,3]) 原本线段是这样的

如果设置偏移量为 2 那么就是整体往左边移动 2，变成这样

如果设置偏移量为 -2 那么就是整体往右边移动 2，变成这样

Canvas 提供提供了 lineDashOffset 属性来设置虚线的起始偏移量，而且机制就跟我们上面说的一样

lineDashOffset 属性

ctx.lineDashOffset 用于设置虚线偏移量的属性

ctx.lineDashOffset = value;

值	说明
value	一个符点数 (float)，初始值为 0.0

范例

下面的代码使用 lineDashOffset 属性绘制虚线

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="300" height="150">
</canvas>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");

ctx.setLineDash([4, 16]);
ctx.lineDashOffset = 2;
ctx.lineWidth = 15;
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(250, 50);
ctx.stroke();
</script>

运行结果如下

跑马灯效果

跑马灯 效果是一种动画技巧，经常出现在计算机绘图程序的选项工具中

它能帮助用户根据图片背景动态变化的边界来区分选择的边界

我们可以使用 lineDashOffset 属性实现边框的跑马灯效果

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-2" width="300" height="150">
</canvas>

<script>
var c   = document.getElementById("canvas-2");
var ctx = c.getContext("2d");

var offset = 0;

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

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

march();
</script>

显示效果如下

← Canvas 线段样式 setLineDash() Canvas 线条末端样式 lineCap →

简单教程

Canvas 虚线样式的起始偏移量

lineDashOffset 属性

范例

跑马灯效果

Canvas 基础教程