Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/470.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 画布绘制图像绘制缩放图像_Javascript_Html_Canvas_Drawimage - Fatal编程技术网

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

Javascript 画布绘制图像绘制缩放图像,javascript,html,canvas,drawimage,Javascript,Html,Canvas,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");

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

代码如下-

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缩放图像的情况下控制画布大小?

我发现,如果我硬编码画布标记的宽度和高度,则不会发生缩放

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