将globalCompositeOperation用于有限数量的图像

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

例如，我在画布上画了很多东西。除了一切之外，完成了无关的操作，我想对两个图像进行一些操作（我只想显示结果，而不是两个图像）。如何做到这一点？

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

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

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

非常感谢！

来源

2016-11-04 Skeptron

创建一个屏幕外画布并将其用作工作空间。只要你有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-04 16:47:55 Blindman67

我最终也使用了这个解决方案，这在性能上似乎很轻。看起来是正确的，尽管为了这么简单的事情需要有第二张画布，这很让人伤心。：（不管怎么说，多谢拉！ – Skeptron

将globalCompositeOperation用于有限数量的图像

回答

相关问题