将离屏画布的部分最快地复制到屏幕画布的方法

Question

我想将离屏画布的一部分（即坐标x、y和宽度高度w、h）复制到屏幕画布上。这个操作可以实现吗？如果可以，最快的方法是什么？

- Rewind

Answer 1

是的，您只需要使用 drawImage() 或 putImageData()。函数调用 drawImage() 可以将画布作为数据源参数，因此您可以使用离屏画布作为源在屏幕画布上绘制。如果您需要保留透明度，则需要使用 putImageData()，它会完全覆盖现有画布数据。相反，drawImage() 将使用上下文的 globalCompositeOperation 参数对数据应用混合模式。

var offscreen_canvas = document.getElementById("offscreen_canvas");
var onscreen_canvas = document.getElementById("onscreen_canvas");
var onscreen_context = onscreen_canvas.getContext("2d");

// Don't care about transparency:
onscreen_context.drawImage(offscreen_canvas, source_x, source_y, source_width, source_height, dest_x, dest_y, dest_width, dest_height);

// Or, if we care about transparency preservation:
var offscreen_context = offscreen_canvas.getContext("2d");
var offscreen_data = offscreen_context.getImageData(x, y, width, height);

onscreen_context.putImageData(offscreen_data, dest_x, dest_y);

References: drawImage() and putImageData().

- Xenethyl

---

为了速度，我应该每次获取上下文的引用，还是应该将其存储在某个地方？ - Rewind

理论上，如果您在获取上下文后将其句柄存储一次，应该会获得更好的性能。实际上，您可能不会注意到任何差异。第一次调用 getContext() 时，它将在您首选的模式（2D 或 3D）中创建上下文实例。之后，如果您调用 getContext()，它只会返回对已创建对象的引用。因此，函数调用会有一些最小的开销。 - Xenethyl