HTML/Jquery关于画布大小调整的问题-$（窗口）。调整大小vs$（窗口）。加载/$（文档）。准备好了吗

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

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

$（窗口）。调整大小（函数（）{
var canvas=document.getElementById（'canvas'）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
});

然而，我希望我的画布从一开始就完全调整大小，而不仅仅是当有人调整屏幕大小时。出于某种原因，当我复制上面的代码时，除了我更改了

$（窗口）。将
大小调整为
$（窗口）。加载
或
$（文档）。就绪
，画布没有设置为要开始的窗口大小

有没有人看到我试图做的事情中有什么我没有看到的错误，或者对如何实现这一点有任何其他想法

最好的，提前感谢，

萨米人

编辑：

请注意，我正在将ProcessingJS草图加载到画布中。我不知道加载所需的时间是否会对事情产生影响，但我想我还是提一下这件事吧……
试试下面的方法：

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);
});

提琴：
试试下面的方法：

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);
});

Fiddle:
通过
.width
/
.height
调整大小的问题在于jQuery使用CSS来实现这一点。如果希望画布具有更多像素，请改用画布的
宽度
/
高度
属性。CSS将扩展它，HTML将提高分辨率

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

通过
.width
/
.height
调整大小的问题在于jQuery使用CSS来实现这一点。如果希望画布具有更多像素，请改用画布的
宽度
/
高度
属性。CSS将扩展它，HTML将提高分辨率

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

ready
有效：。但是，为什么要使用jQuery和
document.getElementById
？使用$（“#canvas”）通过拉伸所有内容而不是出于某种原因提供更多分辨率来调整画布的大小。
ready
有效：。但是，为什么要使用jQuery和
document.getElementById
？使用$（“#canvas”）可以通过拉伸所有内容来调整画布的大小，而不是出于某种原因提供更高的分辨率。不，这似乎没有什么区别。。。事实上，您的代码实际上只是拉伸画布，而不是调整画布的大小。也就是说，如果我用我的旧代码替换resizeCanvas（）函数中的代码，我最终会得到工作代码，只是我遇到了与以前相同的问题。好的，我注意到你更新了你的问题，提到你使用ProcessingJS。您能否发布一段用于创建处理画布的代码片段？您应该能够在创建画布时使用，将文档的宽度和高度传递给画布。然后像以前一样绑定
resize（）
事件，再次调用
Processing.size（）
。在没有看到您的代码的情况下，很难给出一个具体的答案。我只是使用了如下内容：
导入的processing.js脚本处理其余部分。对于如何使用
Processing.size（）
函数创建画布，我有点困惑。。。你能解释一下怎么做吗？另外，谢谢你迄今为止的帮助！您应该能够使用
var processingstance=Processing.getInstanceById（'canvas'）获取处理实例。然后，调用
processingstance.size（$（window.width（），$（window.height（））应根据窗口尺寸调整画布的大小。如果这样做有效，那么将其合并到
resize（）
和
$（function（）中应该不会太难
events.噢，我知道该怎么做，并且已经在更改画布尺寸了。我误解了你上面所写的内容。为了确保我完全理解你的意思-你是说更改处理草图尺寸也应该更改画布尺寸？我会在回到工作模式后尝试一下……naa，这似乎不是我想要的有一点不同……事实上，您的代码实际上只是拉伸画布，而不是调整画布的大小使用我的旧代码执行函数，我最终得到了工作代码，只是我遇到了与以前相同的问题。好的，我注意到你更新了你的问题，提到你使用ProcessingJS。你能发布一段用于创建处理画布的代码吗？你应该能够在创建画布时使用，并将宽度和高度传递给它然后像以前一样绑定
resize（）
事件，调用
Processing.size（）
再一次。在没有看到您的代码的情况下，很难给出一个具体的答案。我只是使用了如下内容：
导入的processing.js脚本处理其余部分。对于如何使用
processing.size（）我有点困惑
函数创建画布…您能解释一下如何做吗？同时，感谢您迄今为止的帮助！您应该能够使用
var processingstance=Processing.getInstanceById（'canvas'）；
。然后调用
processingstance.size（$（window.width（），$（window.height（））获取处理实例
应该根据窗口尺寸调整画布的大小。如果这样做有效，那么将其合并到
resize（）
和
$（function（）中应该不会太难
events.噢，我知道该怎么做，并且已经在更改画布大小后做了一些工作。我误解了您上面所写的内容。为了确保我完全理解您的意思-您是说更改处理草图大小也应该更改画布大小？我将在回到工作模式后尝试此方法。。。