Question

我有一个非常简单的问题：是否可以仅对有限数量的图像使用globalCompositeOperation？

例如，我在画布中画了很多东西。除了一切，并完成无关，我想对两个图像做一些操作（我只想显示结果，而不是两个图像）。怎么办？

目前，执行此类操作会影响已经在下面绘制的所有内容。

所以我找到的解决方案是在另一个画布上进行操作，我在主画面上显示第一个画布。但这看起来很糟糕。首先，它击中了表演。然后，它感觉不直观。最后，我放松了对图层的控制：我第二个画布中的任何内容都将始终位于第一个画布的顶部。

这看起来像一个非常简单的功能，我希望我只是在谷歌搜索不好！

非常感谢！

Answer 1

创建一个屏幕外画布并将其用作工作空间。只要你有RAM来存储它们，就可以创建很多。

创建屏幕外画布

function createCanvas(w,h){
      var canvas = document.createElement("canvas");
      canvas.width = w;
      canvas.height = h;
      canvas.ctx = ctx.getContext("2d");
      return canvas;
}

那么简单，然后你就把它视为一个图像。要绘制到另一个画布

var offScreenCan = createCanvas(1024,1024);
offScreenCan.ctx.drawImage(myImage);  // put something on the canvas
ctx.drawImage(offScreenCan,0,0);  // draw that canvas to another

我将上下文附加到画布而不是将画布包装在包含对象中。我曾经担心画布会影响性能现在我只要加载它就将所有图像转换为画布，它根本不会影响性能。

将globalCompositeOperation用于有限数量的图像

1 个答案: