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

我发现如果我对canvas标签的宽度和高度进行硬编码，而不是进行缩放。

另一个解决方案是使用 prop 而不是 css 设置宽度和高度（例如 $（＆＃34;＃cnv＆＃34;） .prop（{＆＃34; width＆＃34;：800，＆＃34; height＆＃34;：600}）; ）

画布drawimage画放大图像

1 个答案: