setLineDash([3,2])，绘制实线而不是虚线。 (Canvas HTML5)

Question

我正在尝试使用 setLineDash 和 lineDashOffset(HTML5 Canvas-2d Context) 绘制不同的矩形设计。但是绘制的是实线而不是虚线。请帮忙。

注意事项：

Canvas缩放完成。
drawLine API 用于绘制线条。
我正在使用不同的整数点来画线。
setLineDash([3,2])。严格来说，虚线的粗细是“3”，它们之间的space应该是“2”。

`

this.context.setLineDash([3,2]);
this.context.lineDashOffset = 2;  
drawLine(300,9.5,570,10);
drawLine(300,9.5,300,100);
drawLine(300,99.5,570,100);
drawLine(570,9.5,570,100);`

我的完整代码供您参考： Codepen Link

灵感来自： Document Link

Answer 1

发生这种情况是因为您使用 closePath() 关闭了路径。

这个方法不是说“路径声明结束”，而是说“使我的路径成为封闭路径”，这意味着它将lineTo路径中的最后一个入口点。这样做并根据线的长度，第二条线可能有自己的破折号覆盖第一条线的孔。

const context = canvas.getContext("2d");

function drawLine(x1, y1, x2, y2, mode) {
  context.beginPath();
  context.moveTo(x1, y1);
  context.lineTo(x2, y2);
  switch (mode) {
    case "closePath":
      context.closePath();
    case "lineTo":
      context.lineTo(x1, y1);
  }
  context.stroke();
}
context.lineWidth = 2;
context.setLineDash([3, 2]);

context.strokeStyle = "red";
drawLine(30, 9.5, 30, 100, "closePath");
context.strokeStyle = "blue";
drawLine(60, 9.5, 60, 100, "lineTo");
context.strokeStyle = "green";
drawLine(90, 9.5, 90, 100, "");

<canvas id="canvas"></canvas>

为了避免这种情况，请不要调用 closePath()。

setLineDash([3,2])，绘制实线而不是虚线。 (Canvas HTML5)

setLineDash([3,2]), draws a Solid Line instead of dashed lines. (Canvas HTML5)

javascript

rendering

canvas

html5-canvas