Javascript Html5画布拉伸图像

我试图在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 );
    }
);

---

我在

中添加了这个问题，这是因为您在CSS中修改了画布大小。 画布有两个独立的大小：HTML大小（放在画布标记中的大小）和css大小，这实际上是画布的重新缩放。 HTML大小是您控制的大小（当您绘制时，它使用此大小），CSS大小是显示的大小，它是HTML大小的重缩放

所以在这里，您的画布具有默认大小（我不记得了），但由css调整大小（并拉伸）

HTML:

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

---

在这里，我使用正确的大小分配

画布有自己的大小<默认情况下，代码>300x150。样式（宽度/高度）只需像任何图像一样拉伸画布即可。因此，您应该将大小设置为所需的大小。您可以通过html

或从JS code

canvas.width=canvas.height=123

执行此操作。此外，您还可以通过图像属性设置大小

canvas.width=img.width

等

那么，看看JSFIDLE： 它工作得很好

小upd：-这可能也有帮助

 #cv {
    background:#ff0;
}