javascript - PJS草图和HTML Canvas

我试图通过以下方式将pjs草图粘贴到html画布上时正在做什么。

<body>
<canvas id="mycanvas" style="border: 1px solid black;"></canvas>
</body>
<script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js">
</script>

<script>
var sketchProc = function(processingInstance) {
with (processingInstance) {
size(800, 400);
frameRate(30);

draw = function() {
  background(235, 245, 255);
};

}};
var canvas = document.getElementById("mycanvas");
var processingInstance = new Processing(canvas, sketchProc);
</script>

当我开始学习这些东西时，我渴望将动画添加到html文档中。我几乎是从上面的方法中学到的，我以为仓鼠可以学会按动按钮并获得颗粒。也就是说，我对这种机制不太了解，但结果是肯定的。

这是上面的例子：
https://jsfiddle.net/h1Lb91ux/

这是我试图弄清这一点的尝试。

以下代码定义了一个名为sketchProc的函数。

var sketchProc = function(processingInstance) {
with (processingInstance) {
size(800, 400);
frameRate(30);

draw = function() {
  background(235, 245, 255);
};

}};

这不会返回任何内容，因为我们只是定义了sketchProc，而不是调用它。它的参数是processingInstance，就像我一样，它被定义为局部变量：

var functionX = function(x) {
  return x;
};

但是我不理解with语句。我知道来自excel-vba的with语句，该语句可用于将多个方法附加到对象，而不必重复键入对象名称。一样吗

以下陈述很合理。

var canvas = document.getElementById("mycanvas");

但是下一个令人困惑：

var processingInstance = new Processing(canvas, sketchProc);

对我来说，这似乎是我们从一个对象构造函数（在javascript中）或一个类（在处理中）制作单个实例或对象，该类接受2个参数：canvas和sketchproc。我们称这个特定的实例processingInstance为混乱，它与在sketchProc函数中使用的局部变量同名。

我希望这不是太麻烦了。

最佳答案

以下代码定义了一个名为sketchProc的函数。

var sketchProc = function(processingInstance) {
with (processingInstance) {
size(800, 400);
frameRate(30);

draw = function() {
  background(235, 245, 255);
};

}};

它定义了一个函数对象，该对象本身包含draw()之类的函数。您可以阅读有关函数对象here的更多信息，但是基本上，这只是一个包含Processing可以调用的函数的实例。

但是我不理解with语句。

尝试使用“ javascript with”之类的参数进行搜索，以获得大量结果，包括this one。但是我的理解是，这是避免必须在一切之前调用processingInstance.的快捷方式。您可以尝试删除with语句，并将processingInstance.放在任何Processing函数之前，以查看替代方法。 with是可选的，但是使您的代码略短。我个人不喜欢在这里使用with，但这就是我。

但是下一个令人困惑：

var processingInstance = new Processing(canvas, sketchProc);

  对我来说，这似乎是我们从
  对象构造函数（在javascript中）或类（在
  处理），它需要2个参数：canvas和sketchproc。我们是
  调用此特定实例processingInstance，这令人困惑
  与函数中使用的局部变量同名
  sketchProc。

您的理解听起来是对的。创建Processing实例是所有处理魔术的开端，它会自动为您调用setup()函数和draw()函数。如果变量使您感到困惑，也可以重命名。

退后一步，此代码使用Processing.js的实例模式，这就是为什么您拥有所有这些您并不真正理解的额外代码的原因。我建议您从更基本的全局模式开始，这将使您的代码看起来像这样：

<script type="application/processing">
function setup(){
  size(800, 400);
  frameRate(30);
}

function draw() {
  background(235, 245, 255);
};
</script>
<canvas> </canvas>

我也很好奇您为什么使用Processing.js。如果您来自JavaScript背景，那么P5.js可能会让您更幸运。