javascript - Canvas 自动调整为 50x50

Question

我正在尝试将一个相当大的项目从可汗学院转移到“真实”世界，但一直遇到同样的问题，当我运行我的代码时， 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:

椭圆(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 大小就是其中之一。在“真正的”Processing.js 中，您必须自己调用 size() 函数来完成。您还需要注意其他差异，例如使用度数而不是弧度。

无耻的 self 推销:here是使用 Processing.js 的指南。