上一章节我们说到,线性路径的绘制,主要利用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()方法的参数看看结果有什么不同</