为什么我克隆的HTML5 canvas元素的内容显示为纯黑色背景？

Question

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

我提前创建了一个新的较小的空白canvas元素，并将其附加到具有特定高度/宽度的DOM。

想法是使用以下方法在页面加载后将大的canvas元素克隆为较小的元素：

//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);

结果总是看起来像这样：

Answer 1

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

要解决此问题，您需要指定两个矩形（x，y，宽度，高度）-第一个是较大的值，第二个是较小的值。 例如drawImage(source,sourceX,sourceY,sourceWidth,sourceHeight,targetX,targetY,targetWidth,targetHeight);

这是一个例子：

var bigCanvas = document.getElementById("bigCanvas");
var smallCanvas = document.getElementById("smallCanvas");
var img = new Image();
img.onload = function() {
  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";

<canvas id="bigCanvas" width="400" height="300"></canvas>
<canvas id="smallCanvas" width="40" height="30"></canvas>