无指定尺寸的html5画布缩放

Question

我刚开始使用html5 canvas元素。

我使用的是最新的Firefox和铬浏览器。到目前为止，他们的回复都是 。

我想要实现的是缩放图像，而不必 指定画布或图像的尺寸。我希望画布填充 浏览器窗口，并且图像填充画布时没有指定任何尺寸的 。当用户调整浏览器的框架时，重新调整画布及其在 飞行中的图像。

我正在测试的大厦图片是4284x2844。

我设法达到动态缩放，但有一个问题... 如果我没有指定大小的图像变得模糊。

这是我的第一个stackoverflow问题，我还没有征服 格式。所以，请看看代码的小金额超过 在引擎收录：

http://pastebin.com/88faqJUx

谢谢您的帮助。

我找到了解决办法...

添加两行，没有其他变化，并获得成功，但在这一点上我不太确定 为什么它最初是失败，而是彻底的快乐运动上...

<canvas id="taba_main_canvas"> 
Your browser does not support the canvas element. 
</ canvas> 

<script type="text/javascript"> 
    var main_canvas=document.getElementById("taba_main_canvas"); 
    var cxt=main_canvas.getContext("2d"); 


    // adding these next two lines solved the blurriness issues   

    //Set the canvas width to the same as the browser 
    main_canvas.width = window.innerWidth; 
    main_canvas.height = window.innerHeight; 


    var img=new Image(); 
    <!-- mansion pic 4284x2844 --> 
    img.src="images/mansion_3344.png"; 

    img.onload = function() 
    { 
     <!-- use the graphics full size and scale the canvas in css --> 
     cxt.drawImage(img,0,0,main_canvas.width,main_canvas.height); 

    } 

</script> 

只是一个小小的问题，图像的垂直尺寸显然是短短的几行比帆布高 ，所以我得到一个vertival滚动条。较高的浏览器窗口拖动，通常 将消除垂直滚动条没有效果。我试过在代码中操纵画布或图像高度 ，但这并没有改变任何东西。

尽管如此，让图像看起来干净是一大胜利。我正在继续前进，稍后将重新访问此 。

Answer 1

另一种方法是锁定文档onresize事件并使用window.innerWidth和window.innerHeight或其他类似的东西调整画布的大小。我自己也是这样用的，但那是我不关心IE支持的东西 - 关于浏览器支持的信息，请参阅quirksmode上的W3C DOM Compatibility - CSS Object Model View。另请注意，innerWidth和innerHeight中包含的滚动条宽度为;如果您的页面可能需要滚动，您可能希望执行减去20等操作，并使用合适的背景颜色填充包含元素。

我认为你不只是试图画一个图像 - 如果你只是这样做，<img>将是一个更好的匹配。

编辑：jQuery有$(document).width();和$(document).height();这似乎得到正确的数字。另一个编辑：其实他们是错的;它们是文档的宽度和高度，而不是视口的宽度和高度，所以我认为innerWidth和innerHeight可能都是。