Canvas 虚线样式的起始偏移量

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

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

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

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

    也就是 偏移量 = 设定的值 % (1+2+3) = 设定的值 % 6

  2. 如果设定的是正整数,则往左边移动

    例如原本的虚线样式为

    [1,2,3,1,2,3,1,2,3,1,2,3....]
    

    如果设定偏移量为 2 ,那么就会变成以白色开头的

    [1,3,1,2,3,1,2,3,1,2,3....]
    
  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 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.