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/中。

- rab

Answer 1

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

因此，在这里，您的画布具有默认大小（我不记得是多少），但被CSS调整大小并拉伸。

HTML：

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

CSS：

 #cv {
    background:#ff0;
}

我用正确的尺寸分配更新了你的代码片段，这里是结果

- nialna2

Answer 2

Canvas有自己的尺寸，默认为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/ - 这也可能有所帮助。

- Novelist