对有限数量的图像使用 globalCompositeOperation

Question

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

例如，我在 canvas 中画了很多东西。最重要的是，与完成无关的是，我想对两张图片进行一些操作（我只想显示结果，而不是两张图片）。怎么做到的？

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

所以我找到的一个解决方案是在另一个 canvas 中进行操作，我将其显示在我的主要 canvas 之上。但这看起来很糟糕。首先，它会影响性能。然后，感觉不直观。最后，我失去了对图层的控制：第二个 canvas 中的任何内容都将始终位于第一个 canvas.

之上

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

非常感谢！

Answer 1

创建一个离屏 canvas 并将其用作作品 space。你可以创建很多，只要你有 RAM 来存储它们。

创建离屏canvas

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

就这么简单，然后您只需将其视为图像即可。绘制到另一个 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

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

对有限数量的图像使用 globalCompositeOperation

Using globalCompositeOperation for a limited number of images

javascript

html

canvas

clip

globalcompositeoperation