javascript - Html5 canvas drawImage 拉伸(stretch)

Question

我尝试在 html5 canvas 上绘制图像。问题是图像在 Canvas 中拉伸(stretch)

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 中修改了 Canvas 大小。 Canvas 有两个不同的大小:HTML 大小(放在 canvas 标签内的大小)和 css 大小，它实际上是 Canvas 的重新缩放。 HTML 大小是您控制的大小(当您绘制时，它使用此大小)，CSS 大小是显示的大小，它是 HTML 大小的重新缩放。

所以在这里，你的 Canvas 有默认大小(我不记得了)但是被 css 调整了大小(和拉伸(stretch))

HTML:

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

CSS:

 #cv {
    background:#ff0;
}

我在这里updated your fiddle具有正确的大小分配