Question

我有两个画布元素，它们从父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。当第一个画布高度为150px时，它仅在第二个画布上应用150px的画布绘制，高度为200px。

任何想法或建议？

修改

一个可能的解决方案，但它不漂亮。

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

使用drawImage（canvas，0,0）时不同的画布大小

1 个答案: