如何提高mousemove中画圆的速度[JS / CANVAS]答案

【问题标题】：How to improve speed of draw circle in mousemove [ JS / CANVAS ]如何提高mousemove中画圆的速度[JS / CANVAS]
【发布时间】：2019-10-02 23:15:31
【问题描述】：

我创建了一个脚本，允许我在鼠标移动期间画圆，但速度并不快。在绘制圆之前，我在 mousemove 期间获取颜色像素以在画布上绘制一个选择颜色的圆。

我在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);
}

更新：

如你所见，有两条线，第一条是我慢拖时，第二条是快拖时的问题

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

【问题讨论】：

标签： javascript canvas pixi.js

【解决方案1】：

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

【讨论】：

我把这个var graphics = new PIXI.Graphics(); 放在全局变量中，但这并没有改变。我把 UPDATE 放在帖子里告诉你发生了什么
var graphics = new PIXI.Graphics(); pixi_canvas.stage.addChild(图形);将这些代码放到全局中，请注意不要让图像覆盖此图形（您可以使用 addChildAt(image, 0) 将图像放置到底层）。
哦，我知道你的意思了，你可以画线（使用 moveTo 和 lineTo）而不是画圆。
我已经想过这样做，但我需要像绘画工具一样绘制，没有线条，你明白吗？如果你愿意，我可以在 github 上分享我的代码？
你可以查看这个例子：williammalone.com/articles/…。它使用线条的方法。