嗨，我想使用縮放將畫布的內容復制到另一個畫布中

Question

實際上。 我創建了兩個畫布，一個包含一些靜態內容，另一個畫布包含一些動態內容。 現在我已經在單獨的畫布中顯示了兩個畫布的快照，其中快照將根據移動的對象而變化。 我正在使用 getImage & putImage 但無法縮放圖像內容。 甚至 getImage 也不適用於連接動態內容的畫布，因為顯示了安全錯誤。

Answer 1

context.drawImage可以使用另一個畫布作為其源圖像。

context.drawImage可以在繪制時縮放源圖像。

context.drawImage不會像getImageData那樣違反 CORS 安全性。

例如，假設 sourceCanvas 的原始圖像位於坐標 [20,30] 處，大小為 100x140。

如果您有目標畫布的上下文，則可以將其縮放 2 倍並在目標畫布上的 [50,60] 處繪制，如下所示：

context.drawImage( 
    sourceCanvas,
    20,30,100,140,   // grabs 100x140 pixels from sourceCanvas at [20,30]
    50,60,200,280    // scale the grabbed pixels to 200x280 and draw it at [50,60]
);