Javascript 使用掩码丢失FPS

我正在开发一个可以进行图像处理的应用程序，所以我使用Javascript和PixiJS库使之成为可能。我想在画布悬停时更新光标图像

第一个解决方案我尝试使用游标：url（cursor1.png）412，auto；但我不能调整光标的大小。默认大小为64px，我无法设置其他值

第二个解决方案我决定添加到DOM中，并使用Javascript更新x，y位置，但我得到了延迟

第三个解决方案是将游标集成到画布中

上一个解决方案我尝试将操作拆分为2个画布。第一个是图像处理，第二个是我的光标

当画布悬停时，在我失去FPS之前提出的所有主张，第一个除外

用于图像处理的Init主画布 鼠标悬停时光标更新的初始化画布 鼠标移动事件

---

任何人都知道如何优化鼠标飞行的FPS，提前谢谢

为什么你还需要第二块画布呢？

---

如果要更新光标，请在更新循环结束时进行更新，仅此而已，不要为此制作新画布。

我已测试添加到主画布，但我也丢失了FPS，因此我认为创建新的画布铺层器会更好，但事实并非如此。你有什么建议吗？我注意到我使用带小精灵的面具获得了丢失FPS。我同意@Denis Ambrus的观点，它不应该只需要第二块画布来处理光标。@Wyllis其他问题：你能不能也显示一下光标。updatePosition在做什么？渲染循环的外观如何？如果您在JSFIDLE、codesandbox或PixiPlaydle.com上创建工作示例，那将是最好的—这样我们就可以看到整个画面，并提出具体的修复方案。抱歉@domis86我尝试使用codesandbox，但我的浏览器没有响应，所以我无法向您展示示例。在

cursor.updatePosition

中，我得到：

const canvasChild=canvas.getCursorCanvas（）.stage.children；const last=canvasChild.length-1；canvasChild[last].position.x=x；canvasChild[last].position.y=y。我可以寄给你github回购吗？谢谢lot@heticWyllis如果您尝试禁用（注释掉）除光标（和空精灵）之外的所有内容，它仍然很慢吗？
function _initMainCanvas(imgData) {
  let newCanvas = new PIXI.Application({
    width: imgData.width,
    height: imgData.height,
    transparent: true
  });

  let blurContainer = new PIXI.Container();

  filters.initFilters();

  // ----------------------------------------------------------------------------------------
  //      Normal Sprite
  // ----------------------------------------------------------------------------------------

  let bg = main.createSprite({
    from: imgData.img,
    interactive: true,
    filters: [filters.getFilterSharpen(), filters.getFilterAdjustment()],
    width: imgData.width,
    height: imgData.height
  });
  newCanvas.stage.addChild(bg);

  //$(".blur_cursor").remove();

  // ----------------------------------------------------------------------------------------
  //      Blur Sprite
  // ----------------------------------------------------------------------------------------

  let bgBlured = main.createSprite({
    from: imgData.img,
    interactive: false,
    filters: filters.getFilters(),
    width: imgData.width,
    height: imgData.height
  });
  blurContainer.addChild(bgBlured);
  blurContainer.mask = containers.getBlurs();

  newCanvas.stage.addChild(blurContainer);
  newCanvas.stage.addChild(blurContainer);

  select.initSelectionRect();
  newCanvas.stage.addChild(select.getSelectionRect());

  canvas.addMainCanvas(newCanvas);
  document.getElementById("container").appendChild(newCanvas.view);
}

function _initCursorCanvas(imgData) {
  let cursorCanvas = new PIXI.Application({
    width: imgData.width,
    height: imgData.height,
    transparent: true
  });

  _fillCursorCanvas(cursorCanvas);

  canvas.addCursorCanvas(cursorCanvas);

  document.getElementById("container").appendChild(cursorCanvas.view);
}

function _fillCursorCanvas(cursorCanvas) {
  // emptySprite allows to bind events
  let emptySprite = new PIXI.Sprite();
  emptySprite.interactive = true;
  emptySprite.width = cursorCanvas.screen.width;
  emptySprite.height = cursorCanvas.screen.height;
  cursorCanvas.stage.addChild(emptySprite);

  emptySprite
    .on("pointerdown", canvasEvents.handlerMousedown)
    .on("pointerup", canvasEvents.handlerMouseup)
    .on("pointermove", canvasEvents.handlerMousemove)
    .on("pointerout", canvasEvents.handlerMouseout);

  const scale = W / canvas.getWidth();
  const cursorTexture = new PIXI.Texture.from(
    urlManager.replace("index.php/", "") + "assets/images/cursor_img/50.png"
  );

  let circle = new PIXI.Sprite(cursorTexture);
  circle.width = 50 / scale;
  circle.height = 50 / scale;

  cursorCanvas.stage.addChild(circle);
}

const x = e.data.global.x;
const y = e.data.global.y;

cursor.updatePosition(x, y, W);