0

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

例如，我在画布上画了很多东西。最重要的是，完成无关的，我想对两个图像做一些操作（我只想显示结果，而不是两个图像）。怎么可能呢？

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

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

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

非常感谢！

4

1 回答 1

0

创建一个屏幕外画布并将其用作工作空间。只要您有 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

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

于 2016-11-04T16:47:55.950 回答