將屏幕外畫布的部分分塊到屏幕畫布上的最快方法

Question

我想將屏幕畫布（即座標x，y和寬度高度w，h）的blit部分寫入屏幕畫布。這可以做到嗎？做這件事最快的方法是什麼？

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