Html5 canvas 在画布上绘制图像拉伸图像？

我有这个代码（从网上偷来的）：

这在一定程度上是可行的。画布的宽度和高度设置为图像的大小，但仅显示图像的左上角-它似乎被拉伸，以适合分配给画布的所有空间（足以显示整个图像-615px 615px）

如果我添加一个 我使用的是Chrome浏览器，但在Firefox中看起来是一样的

提前谢谢

几点想法：

• 在使用图像之前，使用图像的onload方法为图像提供足够的加载时间
• 如果要使用css调整画布的大小，请不要这样做，而是调整画布元素本身的大小

下面是一些示例代码：

var img=new Image();
img.onload=function(){

    var c=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // resize the canvas element to the same size as the image
    // DON'T RESIZE WITH CSS -- your results will appear stretched
    c.width=img.width;
    c.height=img.height;

    // draw the image onto the canvas
    ctx.drawImage(img,0,0);

}
img.src=e.target.result;

---

问题是使用CSS指定画布的高度和宽度。你知道为什么吗？

var img=new Image();
img.onload=function(){

    var c=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // resize the canvas element to the same size as the image
    // DON'T RESIZE WITH CSS -- your results will appear stretched
    c.width=img.width;
    c.height=img.height;

    // draw the image onto the canvas
    ctx.drawImage(img,0,0);

}
img.src=e.target.result;