Question

我正试图将一个相当大的项目从可汗学院转移到“现实”世界，但是不断遇到同样的问题，当我运行代码时，画布的尺寸调整到比我想要的小得多并变成灰色。

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

控制台在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副本。可汗学院（Khan Academy）的版本可以在幕后为您做一些事情，而我猜测调整画布大小就是其中之一。在“真实的” Processing.js中，您必须自己调用size()函数。您还需要注意其他差异，例如使用度数而不是弧度。

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

画布会自动调整为50x50

1 个答案: