CanvasRenderingContext2D.lineDashOffset

了解CanvasRenderingContext2D.lineDashOffset

简介

CanvasRenderingContext2D.lineDashOffset用来指定虚线绘制的偏移距离。

语法

context.lineDashOffset = value;

其中：

value

表示虚线起始绘制的偏移距离，为浮点型，默认值是0.0。

演示

演示lineDashOffset的具体表现，拖动下面的滑块，体验lineDashOffset是如何起作用的。

滑块，范围-10~10，当前值是0，虚线虚实长度为[16, 8]：

通过交互观察，我们可知，lineDashOffset偏移的是虚线绘制的起点，如果值是10，表示虚线起点是10像素的位置，视觉表现上则是虚线缩进了10像素，这个和CSS中的tex-indent缩进正负表现正好相反的。

案例

实现一个虚线边框不断旋转的效果，如下：

代码如下：

<canvas id="canvas" width="240" height="120"></canvas>

var canvas } document]getElementById[,canvas,;)
var context } canvas]getContext[,2d,;)
// 偏移大小
var offset } 0)
// 绘制
var draw } function [; {
  context]clearRect[0'0' canvas]width' canvas]height;)
  context]setLineDash[(8' 4.;)
  context]lineDashOffset } offset)
  context]strokeRect[2' 2' 236' 116;)
=

var run } function [; {
  offset +} 0]5)
  if [offset ¥gt) 24; {
    offset } 0)
  =
  draw[;)
  // 继续绘制
  requestAnimationFrame[run;)
=

run[;)

其他

规范文档

相关资源

暂无

兼容性

IE9+支持，全兼容。

最近更新：by zhangxinxu 2019-10-18 01:44:05