如何在mousemove [JS / CANVAS]

Question

我创建了一个脚本，该脚本允许我在鼠标移动期间画圆，但是速度并不快。在绘制圆形之前，我在鼠标移动时得到了一个彩色像素，以便在画布上绘制一个已拾取颜色的圆形。

  

我在github上找到了这个increase performance on html canvas mousemove image mask

我无法使用此解决方案，因为我需要使用像素颜色来绘制圆圈

我告诉你我想要的东西

某些代码

handlerMousemove: function(e) {
      canvasEevents.circleMousemove(e)
},

circleMousemove: function(e) {
     if(mousedown.allowBlur) {
          var x = (e.clientX - 200) / (zoomValue / 100)
          var y = (e.clientY - 38 - 25) / (zoomValue / 100)

         //circleBlur(x, y)
         circleBlurPixi(x, y)
     }
 },

function circleBlurPixi(x, y) {
    var graphics = new PIXI.Graphics();

    graphics.beginFill(0xe74c3c);
    graphics.drawCircle(x, y, 100);
    graphics.endFill();

    pixi_canvas.stage.addChild(graphics);
}

更新：

您可以看到有两行，第一行是我缓慢拖动时的行，第二行是我快速拖动时的先行障碍

我只想在快速拖动时得到相同的结果

Answer 1

每个mousemove都会创建一个图形，我认为这会导致性能下降。您可以尝试添加全局图形，然后每次要绘制圆形时，只需将其绘制到全局图形即可。