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>

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

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

最好，并提前感谢，
萨米

编辑：

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

Answer 1

通过.width / .height调整大小的问题是jQuery使用CSS来实现此目的。如果要为画布添加更多像素，请改用画布的width / height属性。 CSS会拉伸它，HTML会提高分辨率。

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

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

Answer 2

尝试类似：

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/

关于Canvas调整大小的HTML / Jquery问题 - $（window）.resize vs $（window）.load / $（document）.ready

2 个答案: