在画布上绘制的线条是虚线。

Question

我尝试在一个彩虹笔绘画画布上作画，但每当我画线时，线条都呈现出点状。 只有当我移动得非常缓慢时，它才能正确显示。

“mousemove”事件监听器似乎无法检测到快速变化，或者我的代码存在其他问题吗？ 此外，这是Codepen链接，如果有人想要一个可用的程序。 这是Codepen链接！

const canvas = document.querySelector('#draw');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext("2d");
ctx.lineWidth = 50;
ctx.lineCap = "round";
ctx.lineJoin = "line";
ctx.strokeStyle = 0;
let hue = 0;
var [x, y] = [0, 0];
let paint = false;

canvas.addEventListener('mousedown', beginDraw);

function beginDraw(e) {
  paint = true;
  [x, y] = [e.x, e.y];
  // ctx.moveTo(x, y);
}

canvas.addEventListener('mousemove', draw);

function draw(e) {
  if (paint == false)
    return;
  ctx.strokeStyle = `hsla(${hue}, 100%, 50%, 0.5)`;
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(e.x, e.y);
  ctx.stroke();
  [x, y] = [e.x, e.y];
  hue++;
}

canvas.addEventListener('mouseup', endDraw);

function endDraw() {
  paint = false;
}

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

- Karan Singh

---

这与 strokeStyle 有关吗？ - sferret

Answer 1

mousemove事件处理程序每秒只会触发几次。在每次执行时，你的代码会从上一个鼠标位置绘制一条线到当前鼠标位置。每条后续线都部分重叠在前一条线上。

对于缓慢的笔画，重叠几乎达到了100％，因此您看不到效果，但对于快速的笔画，重叠显示为圆形。由于使用了部分透明度，线条重叠处变得更暗，这导致了您看到的“点状”效果。

如果将不透明度设置为1，则效果将消失。

- Alexander van Oostenrijk

Answer 2

我认为问题在于你的hsla颜色函数中的不透明度。因为它设置为0.5，所以你有一些透明度，并且因为你为每个mousemove事件绘制一条线，所以你的绘图有起点和终点。有时这些点会重叠在一起。 你可以去掉透明度并将其保持为1。这样，你就不再看到两个点重叠在一起形成的颜色，使颜色更加明显可见。

ctx.strokeStyle = `hsla(${hue}, 100%, 50%, 1)`;

如果您不想在颜色变化时看到点，您需要制作更多的颜色值，并且不仅调整色调参数，还要玩弄其他参数，因为颜色步长可能太大，当颜色改变时会出现边缘。

- Łukasz Blaszyński