时间戳

首页 > 解决方案 > 画布上的画线是虚线的

javascript - 画布上的画线是虚线的

问题描述

我试图在彩虹笔画布上工作，但每当我画画时，线条就会出现虚线。只有当我真正缓慢地移动时，它才会正确显示。

'mousemove' 事件侦听器是否真的无法检测到快速变化，或者我的代码中是否存在其他问题？此外，如果有人想要一个工作程序，这里是 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>

标签： javascript

解决方案

事件mousemove处理程序每​​秒只触发这么多次。每次执行时，您的代码都会从上一个鼠标位置到当前鼠标位置绘制一条线。随后的每一行都与前一行部分重叠。

对于慢速笔划，重叠几乎是 100%，因此您不会看到效果，但对于较快的笔划，重叠显示为一个圆圈。由于您使用的是部分透明度，因此线条重叠的点会变得更暗，这会导致您看到的“虚线”效果。

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

推荐阅读