javascript - 使用画布以真实大小绘制图像

Question

我正在尝试以 1:1 的比例将图像从 URL 加载到 HTML 画布中。我加载图像，并将画布 DOM 元素设置为适当的尺寸，但由于某种原因，画布中的图像被显着放大，因此只绘制了左上角。

以下 JSFiddle 证明了这一点：http: //jsfiddle.net/KdrYr/1/

var img = new Image();
var cv = document.getElementById('thecanvas');
img.src = 'http://www.photographyblogger.net/wp-content/uploads/2009/12/Picture-in-a-picture4.jpg';
img.onload = function() {
    var ctx = cv.getContext('2d');
    cv.style.width = img.width + 'px';
    cv.style.height = img.height + 'px';
    ctx.drawImage(img, 0, 0);
};

例如，我正在尝试绘制这个（对大图感到抱歉：/）

但以这个结束

这可能是什么原因造成的？

Answer 1

您需要分配画布的实际宽度和高度，而不是通过其样式：

cv.width = img.width;
cv.height = img.height;

现场测试用例。

至于为什么，嗯，这里已经解释 过了。