Html5 canvas drawImage stretched

Question

我试图在html5画布上绘制图像。问题是图像在画布

load('img_the_scream', 
    'http://www.w3schools.com/tags/img_the_scream.jpg', 
    function(img){ 
     console.log( img.width , img.height); 
     ctx.drawImage(img, 10, 10 , img.width , img.height); 
    } 
); 

拉伸我http://jsfiddle.net/75rAU/

Answer 1

那是因为你在CSS修改画布大小添加了此问题。 画布有两个单独的大小：HTML大小（放置在画布标记内的大小）和CSS大小，它实际上是画布的缩放比例。 HTML大小是您控制的大小（绘制时使用此大小），CSS大小是显示的大小，即HTML大小的缩放比例。

所以在这里，你的画布有默认的大小（我不记得了），而是通过CSS

HTML改变尺寸（拉伸）：

<canvas id="cv" width="350" height="350"></canvas> 

CSS：

#cv { 
    background:#ff0; 
} 

这里我updated your fiddle与正确的大小分配

Answer 2

画布有它自己的尺寸。默认为300x150。样式（宽度/高度）像任何图像一样伸展canvas。所以，你应该强烈地将尺寸设置为你想要的尺寸。你可以通过html <canvas width="123" height="123"></canvas>或者JS代码canvas.width = canvas.height = 123来完成。此外，在这里你可以通过图像属性中设置的大小canvas.width = img.width等

所以，看的jsfiddle：http://jsfiddle.net/75rAU/3/ 它运作良好

小UPD：http://jsfiddle.net/75rAU/4/ - 这可能也是帮助