1

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

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

但是，我希望我的画布从一开始就完全调整大小，而不仅仅是在有人调整屏幕大小时。出于某种原因，当我复制上面的代码时，除非我更改$(window).resize为$(window).loador $(document).ready，否则画布不会设置为开始时的窗口大小。

有没有人看到我正在尝试做的事情有什么我没有看到的问题，或者对如何实现这一点有任何其他想法？

最好的，提前感谢，
萨米

编辑：

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

4

2 回答 2

3

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

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

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

于 2011-07-18T21:03:17.823 回答
1

尝试类似：

function resizeCanvas() {
    $("#canvas")
        .width($(window).width())
        .height($(window).height());
}

$(function() {
    // initial resize when the page has loaded
    resizeCanvas();

    // bind the resize event to the window
    $(window).resize(resizeCanvas);
});

小提琴：http: //jsfiddle.net/ANSrY/13/

于 2011-07-18T19:02:32.643 回答