Html5画布drawImage拉伸

时间:2013-05-11 17:10:51

标签: javascript html5 html5-canvas

我试图在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/

中添加了此问题

2 个答案:

答案 0 :(得分:29)

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

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

HTML:

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

CSS:

 #cv {
    background:#ff0;
}

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

答案 1 :(得分: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/ - 这也可能有所帮助