19

我试图在 html5 canvas 上绘制图像。问题是在画布中拉伸的图像

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/中添加了这个问题

4

2 回答 2

41

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

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

HTML：

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

CSS：

 #cv {
    background:#ff0;
}

在这里，我用正确的尺寸分配更新了你的小提琴

于 2013-05-11T17:32:28.153 回答
6

帆布有它自己的尺寸。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/ 它运作良好

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

于 2013-05-11T17:33:13.500 回答