为什么克隆的HTML5画布元素的内容显示为纯黑色背景？
为什么克隆的HTML5画布元素的内容显示为纯黑色背景？
提问于 2019-06-05 07:06:49
我有一个大的画布元素，我想克隆并显示在一个新的较小的画布元素中，作为网页加载后的微型显示。
我已经提前创建了新的较小的空白画布元素，并将其附加到具有特定高度/宽度的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);结果总是如下所示：
回答 1
Stack Overflow用户
发布于 2019-06-05 07:19:38
这是因为除了源和位置之外，您没有向drawImage()方法传递任何参数。在这种情况下，它会将图像1:1绘制到较小的画布上-这意味着您只能看到源画布的一小部分，直到小画布的尺寸。
要解决这个问题，您需要指定两个矩形(x，y，width，height) -第一个是较大的值，第二个是较小的值。例如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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56452413
复制相关文章
相似问题