点划线

好玩的问题！我编写了一个自定义的虚线实现；您可以在这里尝试。我采用了AdobeIllustrator的方法，并允许您指定破折号/间隙长度的数组。

这是我的实现（对于s / o线宽略有更改）：

var CP = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype;if (CP && CP.lineTo){  CP.dashedLine = function(x,y,x2,y2,dashArray){    if (!dashArray) dashArray=[10,5];    if (dashLength==0) dashLength = 0.001; // Hack for Safari    var dashCount = dashArray.length;    this.moveTo(x, y);    var dx = (x2-x), dy = (y2-y);    var slope = dx ? dy/dx : 1e15;    var distRemaining = Math.sqrt( dx*dx + dy*dy );    var dashIndex=0, draw=true;    while (distRemaining>=0.1){      var dashLength = dashArray[dashIndex++%dashCount];      if (dashLength > distRemaining) dashLength = distRemaining;      var xStep = Math.sqrt( dashLength*dashLength / (1 + slope*slope) );      if (dx<0) xStep = -xStep;      x += xStep      y += slope*xStep;      this[draw ? 'lineTo' : 'moveTo'](x,y);      distRemaining -= dashLength;      draw = !draw;    }  }}

若要从

20,150

170,10

myContext.dashedLine(20,150,170,10,[30,10]);

要绘制交替的点和点，请使用（例如）：

myContext.lineCap   = 'round';myContext.lineWidth = 4; // Lines 4px wide, dots of diameter 4myContext.dashedLine(20,150,170,10,[30,10,0,10]);

“非常短”的破折号长度

0

如果有人知道访问画布上下文路径当前点的方法，那么我很想知道，因为它可以让我编写它，

ctx.dashTo(x,y,dashes)