将屏幕外画布的一部分用于屏幕画布的最快方式

Question

我想将屏幕外画布的一个blit部分（即coords x，y和width height w，h）写入屏幕画布。可以这样做吗？最快的方法是什么？

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);

参考文献：drawImage()和putImageData()。