如何drawImage（）并用new替换旧内容？

Question

在JS中，我有一些性能关键的代码基本上是这样的：

context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.drawImage(otherImage);

我使用Chrome浏览我的代码，发现瓶颈是...... clearRect。

等等，什么？

这真是太愚蠢了。我甚至不应该需要到clearRect！我目前正在触摸context的每个像素两次（一次用于clearRect，一次用于drawImage），这完全是浪费。从理论上讲，我只需要做一次，直接将每个像素从otherImage复制到context。

我怎么能说“请，搞alpha alpha混合等等，只需用otherImage 中的任何内容替换上下文的内容！”

Answer 1

您可以通过调用context.globalCompositeOperation = 'source-over';（默认值）来确保不进行混合，这只会执行Alpha混合或context.globalCompositeOperation = 'copy';，它只是将图像复制到现有内容之上（{{3} }）