Canvas 自动调整为 50x50

Question

我正在尝试将一个相当大的项目从可汗学院转移到 "real" 世界，但一直遇到同样的问题，当我运行我的代码 canvas 调整大小时比我想要的小很多，然后变成灰色。

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

控制台在 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);

Answer 1

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

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

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

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

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

Canvas 自动调整为 50x50

Canvas automatically resizes to 50x50

javascript

processing

processing.js