pjs草图和html画布

我试图了解我在做什么时，我以下面的方式将pjs草图粘贴到html画布上。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的语句，它可以用来将多个方法附加到一个对象上，而不必重复输入对象名称。这是一样的吗？

以下说法非常有道理。

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

但是，这下一个是混乱的根源：

var processingInstance = new Processing(canvas, sketchProc);

对我来说，这就像是我们正在从一个对象的构造函数内建立一个单一实例或对象（在JavaScript）或类（处理中），它有两个参数：canvas和sketchproc。我们调用了这个特定的实例processingInstance，它与函数sketchProc中使用的局部变量名称相同。

我希望这不是太乱。

来源

2017-08-11 Jozurcrunch

是的，我认为“var processingInstance”可以被称为别的，因为它只是新的处理实例的名称。 –

啊哈。这是另一个小提琴：https://jsfiddle.net/Lnuq6apg/ 这有两个不同的画布标签，每个画布标签都附有不同的草图实例。因此，就我而言，确认“var processingInstance”只是一个实例。到现在为止还挺好。 – Jozurcrunch

很酷。你对其余部分的理解似乎是正确的。是的，“与”关键字是一个时髦的事情。快速谷歌应该找到一些解释它的博客文章。 –

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

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

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

}};

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

但我不明白的声明。

尝试用google搜索“javascript with”之类的结果，其中包括this one。但我的理解是，这是避免在所有事情之前先拨打processingInstance.的捷径。您可以尝试删除with声明并在任何Processing函数之前加上processingInstance.以查看替代项。 with是可选的，但使您的代码稍短。我个人不喜欢在这里使用with，但那只是我。

但是，这下一个是混乱的根源：
var processingInstance = new Processing(canvas, sketchProc); 
对我来说，这就像是我们从对象构造函数（在javascript），或使得单实例或对象类（在处理中），它有两个参数：canvas和sketchproc。我们是调用这个特定的实例processingInstance，它容易混淆是与函数 sketchProc中使用的局部变量相同的名称。

你的理解听起来很正确。创建Processing的实例是启动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代替更多的运气。

来源

2017-08-11 02:28:13

我想我已经开始更加清楚地理解这段代码了，我将在这个周末度过这段时间。我认为这样的问题就像我是一名木匠，我不明白一个奇特的钻子是如何工作的，但仍然能够建立我想要的桌椅。我选择processing.js的部分原因是经验不足。这是我玩过的唯一一个图书馆。在你写的最后一段代码中，在全局模式下，不应该设置（）和draw（）为空？或者是不同的？我接受你的答案，因为它给了我自己想要找出其他我需要的东西，这是我很想做的。 – Jozurcrunch

@Jozurcrunch Processing.js有点奇怪，因为它可以处理（Java）代码并将其转换为Processing.js（JavaScript）代码，或者您可以直接编写JavaScript代码。所以你可以通过用'void'返回类型声明Java风格的函数来编写Java代码，或者你可以通过用JavaScript风格声明函数来编写JavaScript代码，这是我在这里做的，因为你问题中的代码使用JavaScript 。 –

感谢您的帮助。就有关声明而言，你是对的。这里是与上面相同的小提琴，但没有with语句重写：https：//jsfiddle.net/ko86zn8s/ – Jozurcrunch

pjs草图和html画布

回答

相关问题