画布自动调整为 50x50答案

【问题标题】：Canvas automatically resizes to 50x50画布自动调整为 50x50
【发布时间】：2018-08-13 08:04:39
【问题描述】：

我正在尝试将一个相当大的项目从可汗学院转移到“真实”世界，但一直遇到同样的问题，当我运行我的代码时，画布的大小会调整到比我想要的小很多并变成灰色。

我已尝试将代码减少到最低限度，但问题仍然存在。

控制台在 Chrome 中显示了一些错误，但在 Firefox 中没有意外。不过，这两种浏览器的问题都是一样的。

HTML：

<script src="https://cdn.rawgit.com/processing-js/processing- 
js/v1.4.8/processing.js"></script>        
<canvas id="NNcanvas" width="600" height="600" data-processing- 
sources="EllipseTest.js" style="border:1px solid #000000";></canvas>

JavaScript：

ellipse(50,50,100,50);

【问题讨论】：

请向我们提供更多代码。当前代码不能用于重新创建您的问题。
上面的代码是我在尽可能缩小后使用的所有代码，以找出问题所在。现在也在 Edge 上尝试过，然后画布保持其大小，但没有绘制椭圆。使用 MAMP 在 /localhost 上运行它，如果这可能很重要，并在安全模式下运行 Firefox。
您能否发布一个 CodePen 或 JSFiddle，将您的代码显示为 minimal reproducible example？你能发布你看到的错误吗？

标签： javascript processing processing.js

【解决方案1】：

没有看到显示代码工作版本的 CodePen 或 JSFiddle，这很难确定，但我最好的猜测是您需要调用 size() 函数。尝试更完整的程序：

void setup(){
  size(600, 600);
}

void draw(){
  ellipse(50, 50, 100, 50);
}

请记住，可汗学院并不是 Processing.js 的精确 1:1 副本。可汗学院的版本在幕后为您做了一些事情，我猜画布大小就是其中之一。在“真正的”Processing.js 中，您必须自己调用size() 函数来完成。您还需要注意其他差异，例如使用度数而不是弧度。

无耻的自我推销：here 是使用 Processing.js 的指南。

【讨论】：

这行得通，只需要在脚本标签中添加 type="application/processing" 即可摆脱最后一个错误。是否有任何理由在 html 文件中指定画布大小？
@Bjathr 老实说我不确定。我认为 Processing 无论如何都会覆盖您设置的任何大小。