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

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().