Javascript 画布，如何设置线条的虚线？

我只想用画布画一条虚线，虚线是[1,1]。理论上，我发现setLineDash函数可以实现这一点。但是我不能让它工作，也不能弄清楚函数是如何工作的。 好的，setLineDash函数接受一个数组参数。例如，setLineDash[1,1]应将短划线长度设置为1，空间长度也设置为1。但事实并非如此。它只是画了一条实线。请看下面的片段。 const canvas=document.getElementById'myCanvas' const ctx=canvas.getContext'2d' 画布宽度=300 画布高度=300 ctx.lineWidth=3 ctx.strokeStyle='红色' 抽绳[1,1]，25 抽绳[2,2]，50 抽绳[3,3]，75 抽绳[4,4]，100 抽绳[5,5]，125 抽绳[6,6]，150 抽绳[7,7]，175 抽绳[8,8]，200 抽绳[9,9]，225 函数DrawLineDash，y{ ctx.beginPath ctx.setlinedash ctx.moveTo200，y ctx.lineTo100，y ctx.closePath 冲程 } 试试这个

var canvas=document.getElementByIdcanvas； var ctx=canvas.getContext2d； ctx.setLineDash[1,1]； ctx.beginPath； ctx.moveto0100； ctx.lineto200100； ctx.stroke；

---

最后，我发现罪魁祸首是ctx.closePath和ctx.stroke的顺序。我在关闭路径后调用了ctx.stroke，这样会导致结果出错。 重新排序函数调用，它将按预期工作

const canvas=document.getElementById'myCanvas' const ctx=canvas.getContext'2d' 画布宽度=300 画布高度=300 ctx.lineWidth=3 ctx.strokeStyle='红色' 抽绳[1,1]，25 抽绳[2,2]，50 抽绳[3,3]，75 抽绳[4,4]，100 抽绳[5,5]，125 抽绳[6,6]，150 抽绳[7,7]，175 抽绳[8,8]，200 抽绳[9,9]，225 函数DrawLineDash，y{ ctx.beginPath ctx.setlinedash ctx.moveTo200，y ctx.lineTo100，y 冲程 ctx.closePath }

---

您好，您能解释一下您的解决方案是如何工作的吗？我运行了两次您的代码并进行了检查。之后，我发现docs代码每次都在运行。但是你的代码不是。所以我开始从你的代码中删除行，并像文档和它的工作一样重新排列。然后我把它发布在这里。谢谢你的回答。我找到了正确的答案并贴了出来below@Duannx伟大的：