html5画布缩放而不指定尺寸

Question

我刚刚开始使用 html5 画布元素。

我正在使用最新的 firefox 和 chromium 浏览器。到目前为止，他们是 响应一致。

我想要实现的是无需缩放图像 指定画布或图像绘图大小。我想填满画布 浏览器窗口，并让图像填充画布 指定任何尺寸。并重新调整画布及其上的图像 当用户调整浏览器的框架时飞行。

我正在测试的豪宅图片是 4284x2844。

我已经设法实现了动态缩放，但是有一个问题...... 如果我不指定尺寸，图像会变得模糊。

这是我的第一个 stackoverflow 问题，我还没有解决 格式化。所以，请看一下少量的代码 在pastebin：

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>

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

不过，让图像看起来干净是一大胜利。我正在继续前进，并将重新审视这个 稍后。

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 可能就是全部了。