画布绘制图像绘制缩放图像

Question

我需要使用代码设置画布大小，而不是在此画布上绘制图像。问题是绘制的图像被缩放。

代码如下 -

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

如果我不设置画布大小，则按预期绘制图像，则不会缩放。

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

Answer 1

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

另一种解决方案是使用 prop 而不是 css 设置宽度和高度(例如 $(">#cnv"(.prop({"width"： 800， "height"： 600}(;(