宽度/高度不改变 processing.js答案

【问题标题】：Width/height not changing processing.js宽度/高度不改变 processing.js
【发布时间】：2017-05-26 10:31:56
【问题描述】：

我是 processing.js 的初学者，我有一个这样的项目：

在 Test.html 我有：

<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
</head>
<style>
    body {
        margin: none;
        padding: none;
    }
</style>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.3/processing.min.js"></script>
    <canvas data-processing-sources="Test.pde"></canvas>
</body>
</html>

在 Test.pde 我有：

void setup()
{
    size(600,600);
    PFont fontA = loadFont("sans-serif");
    textFont(fontA, 14);
};

println(width);

void draw(){
    background(20, 20, 20);
};

width 应该是 600，因为我在 setup 的 size 函数中输入了“600 x 600”。我在 Firefox 浏览器上运行它，但在 Safari 上也得到了相同的结果。

【问题讨论】：

如果将所有代码放在一个 .pde 文件中会怎样？
如果在同一个文件中并且在 HTML 中只引用了该文件，宽度仍然打印为 100。
我无法重现您的问题。当我运行您的代码时，它工作正常。您能否整理一个 Code Pen 来证明该问题？
我正在获取一个 Code Pen 帐户，但现在，我发现如果我登录 width within 绘图功能，它会记录为 600。但是，任何地方否则，它会记录为 100。
那你在哪里打印width？我们需要看到一个可以运行的minimal reproducible example。否则我们只是猜测。

标签： html processing.js

【解决方案1】：

想想println() 语句何时发生。想想setup() 函数何时被调用。

当您的代码第一次被读取时，您正在定义setup() 函数，但您实际上还没有运行它。然后您打印出@ 987654324@ 变量，尚未设置。 然后定义draw() 函数。

之后，Processing 框架会为您调用 setup() 函数，并开始每秒调用 draw() 函数 60 次。

换句话说，您的代码的行为与它应有的行为完全一致。

如果您想使用width 变量，您必须在从您的setup() 函数调用size() 函数之后进行。

【讨论】：