javascript - 如何以等距方式在曲线上使用setLineDash？

Question

我想在正弦波上画一条虚线。我有一个代表整个正弦波的 x 和 y 值数组。我使用 moveTo 和 lineTo 方法绘制了正弦波。

我知道 setLineDash()。但是，我想确保虚线彼此等距，而不管 x 和 y 值如何。如果我在彼此靠近的 2 个点之间使用 setLineDash() 方法，我将以实线着陆。

Answer 1

只要您等到最后一次 lineTo() 调用之后才对路径进行描边，每个破折号之间的间距将是均匀的。

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

for (let x = 0; x < canvas.width / 8; x+=.1) {
  const y = (Math.sin(x) * 60) + (canvas.height / 2);
  ctx.lineTo(x * 8, y);
}

ctx.setLineDash([4, 4]);
ctx.stroke();
document.body.appendChild(canvas);