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

问题描述

我正在尝试使用 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,300,100);
drawLine(300,99.5,100);
drawLine(570,100);`

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

灵感来自： Document Link

解决方法

发生这种情况是因为您使用 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,60,"lineTo");
context.strokeStyle = "green";
drawLine(90,90,"");

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

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