了解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[;)

    其他

    规范文档

    规范地址 规范状态 备注
    HTML现行标准
    这个规范中定义了'CanvasRenderingContext2D.lineDashOffset'
    现行标准 -

    相关资源

    暂无

    兼容性

    IE9+支持,全兼容。


    by zhangxinxu 2018-10-15 23:54:34