如何在本地將一個 HTML5 Canvas 的內容複製到另一個 Canvas 中？

drawImage() 方法用於在 canvas 上繪製圖像、畫布和影片。它還可以繪製部分影像並增加或減小影像尺寸。

示例

讓我們看一個示例 −

//context grabbed from your destination canvas
ctx = destinationCanvas.getContext('2d');

//drawImage() called passing the source canvas directly
dCtx.drawImage(sourceCanvas, 0, 0);

在此程式碼中，首先從源畫布複製影像。源畫布可以是 HTMLImageElement、HTMLVideoElement 或 HTMLCanvasElement。不能將 canvas 繪製上下文用作源。如果 canvas 繪製上下文是你的源畫布，那麼在 context.canvas 下的上下文中可以找到對原始 canvas 元素的引用

後半部分的程式碼使用 drawImage() 方法將上下文從源畫布複製到所需的畫布。

Chandu yadav

更新於： 03-Mar-2020

2K+ 檢視量

開啟你的職業生涯

完成課程並獲得認證

開始