如何在本地将一个 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() 方法将上下文从源画布复制到所需的画布。

更新于： 03-Mar-2020

2K+ 查看量

开启你的职业生涯

完成课程并获得认证

开始
广告