Javascript 为什么我的克隆HTML5画布元素'；内容是否显示为纯黑色背景？

我有一个大的canvas元素，我想将其克隆并显示在一个新的较小的canvas元素中，以便在加载网页后用作微型显示

我已经提前创建了新的较小的空白画布元素，并以特定的高度/宽度将其附加到DOM中

其想法是在加载页面后，使用以下方法将大画布元素克隆到较小的画布元素：

//grab the context from your destination canvas
const destCtx = destinationCanvas.getContext('2d');

//call its drawImage() function passing it the source canvas directly
destCtx.drawImage(sourceCanvas, 0, 0);

但是，所显示的只是一个坚实的黑色背景。我的期望是较小的画布现在应该在较小的区域中显示较大画布的重复设计

我环顾了一下四周，但到目前为止还没有找到解决这个问题的有效方法

我尝试做的一个小草图：

还尝试了以下方法：

const smallCanvas = document.getElementById('smallCanvas'); 
const bigCanvas = document.getElementById('bigCanvas'); 

smallCanvas.getContext('2d').drawImage(bigCanvas, 0, 0, bigCanvas.width, bigCanvas.height, 0, 0, smallCanvas.width, smallCanvas.height);

结果总是这样：

---

发生这种情况是因为除了源和位置之外，您没有将任何参数传递给drawImage（）方法。在本例中，它会将图像1:1绘制到较小的画布上，这意味着您只能看到源画布的一小部分，直到小画布的尺寸

要解决这个问题，您需要指定两个矩形（x、y、宽度、高度）-第一个是较大的值，第二个是较小的值。 e、 g.

drawImage（源、源X、源Y、源宽度、源高度、目标X、目标Y、目标宽度、目标高度）

下面是一个例子：


var bigCanvas=document.getElementById（“bigCanvas”）；
var smallCanvas=document.getElementById（“smallCanvas”）；
var img=新图像（）；
img.onload=函数（）{
bigCanvas.getContext（'2d'）.drawImage（this，0，0）；
smallCanvas.getContext（'2d'）.drawImage（bigCanvas，0，0，bigCanvas.width，bigCanvas.height，0，0，smallCanvas.width，smallCanvas.height）；
}
img.src=”https://picsum.photos/id/16/400/300";

假设sourceCanvas是一个
HTMLCanvasElement
，问题不在代码段中，因此任何答案都是猜测
sourceCanvas
必须是一个图像DOM对象，如：
var sourceCanvas=document.createElement（'img'）；sourceCanvas.onload=function（）{destCtx.drawImage（this，0，0）；}；sourceCanvas.src='yourImage.png'如果我试图将其作为一个通用功能应用，而bigCanvas的宽度/高度会根据我正在查看的画布设计进行更改，该怎么办？（因此我没有为源画布设置宽度/高度）。较小的画布我可以将其设置为静态高度/宽度，比如150px。在我上面的示例中，您可以用画布元素的尺寸替换drawImage函数中的
this.width，this.height
——从您的问题中回顾代码，它可能是
sourceCanvas.width，sourceCanvas.height
。这就是你的意思吗？我还是得到一个黑色的正方形。我基本上是这样做的：提前创建了一个具有设置高度/宽度的迷你空白画布，并将其附加到源画布顶部的dom中<代码>常量smallCanvas=document.getElementById（'smallCanvas'）；const bigCanvas=document.getElementById（'bigCanvas'）；smallCanvas.getContext（'2d'）.drawImage（bigCanvas，0，0，bigCanvas.width，bigCanvas.height，0，0，smallCanvas.width，smallCanvas.height）。应用时，该框将再次填充纯黑色，而不是显示sourceCanvas中的图像。控制台中没有错误吗？恐怕你必须用你的代码的运行示例更新你的问题，这样我才能看到发生了什么。你想画的大画布的内容是什么？您是否使用drawImage在上绘制图像？在这种情况下，在克隆的那一刻，他们可能还没有被吸引到大画布上。不幸的是，如果你没有发布一个有效的例子，我只能猜测