オフスクリーンキャンバスの一部を画面上のキャンバスに分割する最も速い方法

Question

オンスクリーンキャンバスにオフスクリーンキャンバスのblit部分（つまり、x、y、幅の高さ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()。