对有限数量的图像使用globalCompositeOperation

Using globalCompositeOperation for a limited number of images

本文关键字：图像 globalCompositeOperation      更新时间：2023-09-26

我有一个非常简单的问题:是否可以使用globalCompositeOperation只有有限数量的图像?

例如，我在画布上画了很多东西。最重要的是，我想对两个图像执行一些操作(我只想显示结果，而不是两个图像)。怎么才能做到呢?

现在，这样的操作会影响下面已经绘制的所有内容。

因此，我找到的解决方案是在另一个画布中执行操作，我将其显示在我的主画布上，第一个画布。但这看起来很糟糕。首先，它影响了性能。然后，感觉不太直观。最后，我失去了对图层的控制:第二个画布中的任何东西都将始终位于第一个画布的顶部。

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

非常感谢!

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

创建一个屏幕外画布

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

我将上下文附加到画布上，而不是将画布包装在一个包含对象中。我曾经担心画布会影响性能，现在我把所有的图像转换成画布一旦我加载它们，它不会影响性能。

相关文章：