canvas学习总结四：绘制虚线

上一章节我们说到，线性路径的绘制，主要利用movoTo()，lineTo()等方法，当然 Canvas 2D API 也提供了虚线的绘制方法，CanvasRenderingContext2D.setLineDash();

下面我们就来看看虚线的绘制方法

 

语法

ctx.setLineDash(segments);

参数 segments：

一个Array数组。

一组描述交替绘制线段和间距（坐标空间单位）长度的数字。

如果数组元素的数量是奇数， 数组的元素会被复制并重复。例如， [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。

这里最后一句话有可能我们没有看明白，没关系我们继续往下看。

 

我们先绘一条简单的虚线

 

function drawDashed(){
　　cxt.lineWidth = 4;
　　cxt.strokeStyle = 'green';
　　cxt.beginPath();
　　cxt.setLineDash([5, 15]);
　　cxt.moveTo(20, 20);
　　cxt.lineTo(400, 20);
　　cxt.stroke();
}

 

因此绘制虚线也是非常简单，我们试着改变setLineDash()方法的参数看看结果有什么不同</