画布绘图图像缩放图像

Question

我需要使用代码设置画布大小，而不是在这个画布上设置drawImage。问题是画出来的图像被放大。

密码如下-

currentImageDIV = $("#cnv").css({ "position" : "relative" ,"height": 400, "width": 800,"top" :"100px" , "border": "1px solid red" });

var c = document.getElementById("cnv");
var ctx = c.getContext("2d");
ctx.imageSmoothingEnabled = false;

var img = new Image();
img.src = "/images/sample2.jpg";
img.onload = function () {
     ctx.drawImage(img, 0, 0); 
}

如果我没有设置画布大小比图像绘制的预期，没有缩放。

在没有drawImage放大图像的情况下，如何控制画布大小？

Answer 1

我发现，如果我硬编码画布标签的、宽度、和高度，就不会发生缩放。

另一种解决方案是使用而不是css来设置宽度和高度(例如$(“#cnv”).prop({“宽度”：800，“高度”：600})；