Javascript 画布移动跳过帧？

出于教育目的，我正在用JavaScript编写一个绘图应用程序（MS Paint clone）。简单地说，我在canvas元素上设置了一个

onMouseMove

处理程序，在它里面，如果鼠标按下，我将绘制鼠标在上面的任何像素。问题是，除非我移动鼠标非常、非常、非常慢，否则它会跳过几个点。这就好像浏览器启动鼠标事件回调的速度不够快

我怎样才能克服这个问题？ 我甚至试着把画布做得很小（100x100），但同样的行为也表现出来了。我使用的是全新的Mac Book Pro（2016），所以我不确定问题是否出在我的硬件上

canvas.el.addEventListener（'mousemove'，函数（事件）{ 如果（！mouseDown）{ 返回； } var x=事件补偿x； 变量y=event.offsetY； 绘图（所选工具、画布、x、y）； }); 功能图（工具、画布、x、y）{ var内核=[]； 如果（工具==‘铅笔’）{ push（[x，y]）； }否则，如果（工具==='brush'）{ 对于（var w=-5；w<5；w++）{ 对于（var h=-5；h<5；h++）{ push（[x-w，y-h]）； } } } if（kernel.length>0）{ map（函数（pt）{ canvas.ctx.fillRect（pt[0]，pt[1]，1,1）； }); } } //设置鼠标向下 canvas.el.addEventListener（'mousedown'，函数（事件）{ mouseDown=true； var x=事件补偿x； 变量y=event.offsetY； 绘图（所选工具、画布、x、y）； }); canvas.el.addEventListener（'mouseup'，function（）{ mouseDown=false； });

---

我建议在您的代码中使用debounce并不能解决问题在上一点和当前点之间画一条线而不是一个“点”。如果需要支持特殊笔刷，也可以沿该线插值。你可以在我的答案中找到依据。这就是我最后所做的。另外，在尝试使用较厚的笔刷时，我没有在客户端目标周围绘制多个像素，而是在选择较厚的笔刷时设置

ctx.lineWidth

。谢谢你的反馈。

canvas.el.addEventListener('mousemove', function (event) {
  if (!mouseDown) {
    return;
  }

  var x = event.offsetX;
  var y = event.offsetY;
  plot(tools.selected, canvas, x, y);
});

function plot(tool, canvas, x, y) {
  var kernel = [];

  if (tool === 'pencil') {
    kernel.push([x, y]);
  } else if (tool === 'brush') {
    for (var w = -5; w < 5; w++) {
      for (var h = -5; h < 5; h++) {
        kernel.push([x - w, y - h]);
      }
    }
  }

  if (kernel.length > 0) {
    kernel.map(function (pt) {
      canvas.ctx.fillRect(pt[0], pt[1], 1, 1);
    });
  }
}

// Setting mouseDown
canvas.el.addEventListener('mousedown', function (event) {
  mouseDown = true;
  var x = event.offsetX;
  var y = event.offsetY;
  plot(tools.selected, canvas, x, y);
});

canvas.el.addEventListener('mouseup', function () {
  mouseDown = false;
});