Fatal编程技术网

Javascript pjs草图和html画布

javascript canvas

Javascript pjs草图和html画布,javascript,canvas,processing.js,Javascript,Canvas,Processing.js,我试图理解当我用以下方式将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

我试图理解当我用以下方式将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>
这不会返回任何内容，因为我们只是定义sketchProc，而不是调用它。它的参数是processingInstance，它被定义为一个局部变量，就像我所做的那样：

var functionX = function(x) {
  return x;
};
但我不理解这种说法。我知道excel vba中的with语句，它可以用来将多个方法附加到一个对象，而不必重复键入对象名称。这是一样的吗

下面的陈述很有道理

var canvas = document.getElementById("mycanvas");
但下一个问题令人困惑：

var processingInstance = new Processing(canvas, sketchProc);

var processingInstance = new Processing(canvas, sketchProc);
对我来说，这看起来像是从一个对象构造函数（javascript）或一个类（processing）生成一个实例或对象，该类包含两个参数：canvas和sketchproc。我们调用这个特定的实例processingInstance，它与函数sketchProc中使用的局部变量同名，令人困惑

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

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

}};
我希望这不是太漫无边际

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

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

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

}};
它定义了一个函数对象，该对象本身包含
draw（）
等函数。您可以阅读更多关于函数对象的内容，但基本上这只是一个实例，其中包含处理可以调用的函数

但我不理解这种说法

尝试用谷歌搜索“javascript with”之类的东西，可以获得大量的结果，包括。但我的理解是，这是一条捷径，可以避免在一切之前调用
processingstance.
。您可以尝试用语句删除
，并将
processingstance.
放在任何处理函数之前，以查看替代方法。带有
的
是可选的，但会使代码稍微缩短。我个人不喜欢在这里使用
和
，但那只是我自己

但下一个问题令人困惑：


var processingInstance = new Processing(canvas, sketchProc);



var processingInstance = new Processing(canvas, sketchProc);


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


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

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

}};


你的理解听起来是对的。创建
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>




函数设置（）{
尺寸（800400）；
帧率（30）；
}
函数绘图（）{
背景（235、245、255）；
};



我也很好奇为什么要使用Processing.js。如果您来自JavaScript背景，您可能会更幸运。
是的，我认为“var processingInstance”可以被称为其他名称，因为它只是新处理实例的名称。啊哈。这是另一个提琴：它有两个不同的画布标记，每个标记都附加了不同的草图实例。就我而言，这证实了“var processingInstance”只是一个实例。到目前为止还不错。你对其余部分的理解似乎是正确的。是的，那个“with”关键字是一个时髦的东西。一个快速的谷歌应该会找到一些解释它的博客文章。但奇怪的是，当sketchProc被定义为接受一个参数时，处理立场。然而，当我这样做时，“var processingstance=newprocessing（canvas，sketchProc）；”sketchProc并没有被输入参数。所以这也令人困惑。我觉得我已经开始明白了，但是有些东西我仍然无法理解。我想我已经开始更清楚地理解这段代码了，我会花周末去摆弄它。我觉得这个问题有点像我是一个木匠，我不知道一个花式的钻头是如何工作的，但我仍然能够建造我想要的桌椅。我选择processing.js的部分原因是缺乏经验。这是我唯一玩过的图书馆。在您编写的最后一段代码中，在全局模式下，setup（）和draw（）不应该是空的吗？或者这有什么不同？我接受你的回答，因为它给了我自己解决其余问题所需要的东西，我很想这样做。@Jozurcrunch Processing.js有点奇怪，因为它可以将处理（Java）代码转换为处理（JavaScript）代码，或者你可以直接编写JavaScript代码。因此，您可以通过使用
void
返回类型声明Java风格的函数来编写Java代码，也可以通过声明JavaScript风格的函数来编写JavaScript代码，这就是我在这里所做的，因为您问题中的代码使用的是JavaScript。感谢您的帮助。就with声明而言，你是对的。这里是与上面相同的小提琴，但重写时没有with语句：