我们不仅可以利用 canvas API 绘制虚线，我们还可以扩展一个自己绘制虚线的方法。
扩展思路：
1. 获取起点坐标
2. 计算虚线的总长度，计算虚线包含多少短线然后循环绘制

话不多说，我们直接上代码

var canvas = document.getElementById('canvas'); var cxt = canvas.getContext('2d'); var moveToFunction = CanvasRenderingContext2D.prototype.moveTo; CanvasRenderingContext2D.prototype.moveToLocation = {}; // 重新定义moveTo方法 CanvasRenderingContext2D.prototype.moveTo = function (x, y){ this.moveToLocation.x = x; this.moveToLocation.y = y; moveToFunction.apply(this, [x, y]); }; CanvasRenderingContext2D.prototype.dashedLineTo = function(x, y, dashedLength){ dashedLength = dashedLength === undefined ? 5 : dashedLength; var startX = this.moveToLocation.x; var startY = this.moveToLocation.y; var deltaX = x - startX; var deltaY = y - startY; var numberDash = Math.floor(Math.sqrt(deltaX*deltaX + deltaY*deltaY)/dashedLength); for(var i=0; i < numberDash; i++){ this[i%2 === 0 ? 'moveTo' : 'lineTo'](startX + (deltaX/numberDash)*i, startY + (deltaY/numberDash)*i); //等同于this.moveTo(x, y)或者 this.LineTo(x, y) } this.moveTo(x, y); //连续绘制虚线时，起点从当前点开始 }; //绘制虚线 cxt.lineWidth = 3; cxt.strokeStyle = 'green'; cxt.moveTo(20, 20); cxt.dashedLineTo(200, 200); cxt.dashedLineTo(300, 100, 10); cxt.dashedLineTo(400, 300); cxt.stroke();

 

 

总结：

我们可以通过setLineDash()方法绘制虚线，该方法会以参数的元素个数为 组 的形式去进行 循环 绘制，但是要注意传入方法是参数的元素个数。

我们还可以自定义扩展绘制虚线的方法，主要就是获取起点进而计算线段数进行循环绘制

对canvas绘制图形感兴趣的同学，请持续关注后续更新，如有不对的地方也请指出并多多交流。

如需转载，还请注明出处，非常感谢！