setLineDash([3,2])，绘制一条实线而不是虚线。 （画布 HTML5）

Question

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

注意事项：

1. 画布缩放已完成。
2. drawLine API 用于绘制线条。
3. 我正在使用不同的整数点来绘制线条。
4. setLineDash([3,2])。严格来说，虚线粗细是“3”，它们之间的空格应该是“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()。