javascript - Canvas ，如何设置线点划线？

我只想通过lineDash为[1,1]的画布绘制一条虚线。从理论上讲，我发现函数setLineDash可以做到。但是我无法使其工作，也无法弄清楚该功能如何工作。
AFAIK，setLineDash函数采用的参数是数组。例如，setLineDash([1,1])还将短划线长度设置为1，空格长度也设置为1。但是，事实并非如此。它只是画一条实线。请查看下面的代码段。

const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')
canvas.width = 300
canvas.height = 300

ctx.lineWidth = 3
ctx.strokeStyle = 'red'

drawLine([1, 1], 25)
drawLine([2, 2], 50)
drawLine([3, 3], 75)
drawLine([4, 4], 100)
drawLine([5, 5], 125)
drawLine([6, 6], 150)
drawLine([7, 7], 175)
drawLine([8, 8], 200)
drawLine([9, 9], 225)

function drawLine(lineDash, y) {
  ctx.beginPath()
  ctx.setLineDash(lineDash)
  ctx.moveTo(200, y)
  ctx.lineTo(100, y)
  ctx.closePath()
  ctx.stroke()
}

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

最佳答案

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

const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')
canvas.width = 300
canvas.height = 300

ctx.lineWidth = 3
ctx.strokeStyle = 'red'

drawLine([1, 1], 25)
drawLine([2, 2], 50)
drawLine([3, 3], 75)
drawLine([4, 4], 100)
drawLine([5, 5], 125)
drawLine([6, 6], 150)
drawLine([7, 7], 175)
drawLine([8, 8], 200)
drawLine([9, 9], 225)

function drawLine(lineDash, y) {
  ctx.beginPath()
  ctx.setLineDash(lineDash)
  ctx.moveTo(200, y)
  ctx.lineTo(100, y)
  ctx.stroke()
  ctx.closePath()
}

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