html - 使用 drawImage(canvas,0,0) 时不同的画布尺寸

Question

我有 2 个画布元素，它们从父 div 获取高度。

var canvas = document.getElementById("canvas");
var canvas2 = document.getElementById("canvas2");
canvas.width = canvas.width;
canvas.height = canvas.height;
canvas2.width = canvas2.width;
canvas2.height = canvas2.height;

画布元素的大小在 DOM 中是正确的。现在我遇到了 drawImage() 函数的问题。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var canvas2 = document.getElementById("canvas2");
var ctx2 = canvas2.getContext("2d");
for(var i = 0;i<len;i++){ 
  !magic drawings!
}
ctx2.drawImage(canvas, 0, 0);

问题是将第一个画布复制到canvas2。当第一个画布高度为 150 像素时，它仅在 200 像素高度的第二个画布上应用 150 像素的画布绘图。

有什么想法或建议吗？

编辑

好的，一种可能的解决方案，但它并不漂亮。

ctx2.drawImage(canvas, 0, 0, canvas2.width, canvas2.height);

所以画布被调整大小。因为宽度没有改变，所以它被拉伸到更高的高度。所以不是一个完美的解决方案。

Answer 1

使用画布上下文的缩放参数来避免拉伸

var scaleFactor=canvas2.height/canvas.height;

ctx2.drawImage(canvas,0,0,canvas.width,canvas.height,
                      0,0,canvas.width*scaleFactor,canvas.height*scaleFactor);