【绘制】HTML5 Canvas 虚线和不到20行js代码实现蚂蚁线

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

介绍

现在，浏览器支持canvas画虚线，和虚线有关的方法和属性：

虚线相关属性

属性	介绍
CanvasRenderingContext2D.lineDashOffset	设置虚线偏移量，偏移量是float精度的数字，初始值是0.0

 

虚线相关的方法

方法	介绍
CanvasRenderingContext2D.setLineDash()	填充线时使用虚线模式，使用一组值来描述线段和间隙的交替长度
CanvasRenderingContext2D.getLineDash()	获取当前线的样式，返回描述线段和间隙交替长度的那组值

画虚线

虚线的绘制使用setLineDash()传入一组Array数组，代表线段和间隙的交替长度。

例如：setLineDash([5,5]);表示5像素的线段和5像素的空隙交替出现。

setLineDash([10,5]);表示10像素的线段和10像素的空隙交替出现。

setLineDash([5,4,3]);表示5像素的线段+4像素的空隙+3像素的线段+5像素的空隙+……交替出现

如果传入的数组元素个数为奇数，则在顺序重复这组数据的基础上，再次按照“线段+间隙+线段+间隙+……”的模式交替出现。

如果需要画实线，直接传入setLineDash([]);即可。

在线演示 详细代码

var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d');

    //实线
    context.beginPath();
    context.setLineDash([]);
    context.moveTo(10, 10);
    context.lineTo(100, 10);
    context.stroke();

    //虚线(线长：2，间距：2)
    context.beginPath();
    context.setLineDash([5, 4,3]);
    context.moveTo(10, 20);
    context.lineTo(100, 20);
    context.stroke();

画蚂蚁线

蚂蚁线是下面动图这个样子的像小蚂蚁移动的虚线。蚂蚁线现在被广泛运用到各大绘图软件中充当“选区”和“路径”，如果你用过Photoshop，你一定不陌生。

蚂蚁线

 对于Canvas来说，实线蚂蚁线并不难，因为lineDashOffset能很轻易得实现蚂蚁线功能。

定时实现虚线的不断偏移，简单的不到二十行js代码(除注释)便能实现这个效果：

在线演示 详细代码

canvas实现的蚂蚁线