lineDashOffset

设置虚线偏移量.默认值 0.0

  ctx.lineDashOffset = value;

测验

画三条虚线,参数都为[15,10],第二条偏移量设为5,第三条偏移量设为10

观察三条虚线的起始处,发现实线段长度变短.15 10 5,这是设置偏移量的效果.好像是虚线开始处向左移动了一段距离(偏移量)

再看结尾处,发现也不一样,说明这种偏移是对整条虚线的.

如果设为负值,下面设置为-5.则是向右偏移这个距离.

如果看图会被误导,认为是虚线起点向右偏移了,其实不是.看结尾处边界,虚线是一样长的.起始处的空白是虚线的间隔部分.

最下面一条虚线是设置了偏移为15,正数,它起始也是间隔开始.因为向左偏移15后,起始处的实线段正好移掉了,接着的是间隔

应用

可利用偏移让虚线运动起来,原理就是用动画,每一帧画虚线时改变一次偏移量.这样每次虚线出现的位置就有变化,于是形成动画

下图虚线圆,每次半径变小0.1,虚线偏移量每次加1,起始为5,最大偏移100