Html5画布drawImage拉伸

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大小(放在canvas标签内的大小)和css大小,实际上是画布的重新缩放.HTML大小是您控制的大小(绘制时,它使用此大小),CSS大小是显示的大小,它是HTML大小的重新缩放.

所以在这里,你的画布有默认大小(我不记得了)但是由css调整大小(和拉伸)

HTML:

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

CSS:

 #cv {
    background:#ff0;
}

在这里,我用正确的大小分配更新你的小提琴

Answer 2

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

\n\n

所以，看看jsfiddle：http://jsfiddle.net/75rAU/3/ \n效果很好

\n\n

小更新：http://jsfiddle.net/75rAU/4/ \xe2\x80\x94 这也可能有帮助

\n