jquery - 关于 Canvas 调整大小的 HTML/Jquery 问题 - $(window).resize 与 $(window).load/$(document).ready

Question

我目前正在开发一个使用 HTML5 的 canvas 元素运行的应用程序。我有代码正在调整 Canvas 的大小以适应窗口的大小，如下所示:

<script type="text/javascript">
$(window).resize(function(){
var canvas = document.getElementById('canvas');
canvas.width=window.innerWidth;
canvas.height = window.innerHeight;
});
</script>

但是，我希望我的 Canvas 从一开始就完全调整大小，而不仅仅是当有人调整屏幕大小时。由于某种原因，当我复制上面的代码时，除了将 $(window).resize 更改为 $(window).load 或 $(document) 之外。准备就绪， Canvas 一开始就没有设置为窗口的大小。

是否有人发现我正在尝试做的事情有一些我没有看到的问题，或者对如何实现这一目标有任何其他想法？

最好，提前致谢，
萨米人

编辑:

最好注意到我正在将一个ProcessingJS 草图加载到 Canvas 中。我不知道加载所需的时间是否会对事情产生影响，但我想我不妨提一下这一点......

Answer 1

通过 .width/.height 调整大小的问题是 jQuery 为此使用 CSS。如果您希望 Canvas 有更多像素，请改用 Canvas 的 width/height 属性。 CSS 会拉伸(stretch)它，HTML 会增加分辨率。

$("#canvas")
    .attr('width', $(window).width())
    .attr('height', $(window).height());

http://jsfiddle.net/Jdjxa/1/