processingjs学习系列之二

processing程序如何在web上运行。

首先要在HTML页面中首先需要引入processingjs的库

<script type="text/javascript" src="processing-1.3.0.js"></script> 

之后就可以引入并执行processing程序了，通过上面的js库就可以将其在canvas中画出来。

方法一，使用canvas本身：

1. processing程序写好后保存为pde后缀的文件。

2. 要让图形在canvas中绘制出来，必须给canvas标签加入一个特定的属性 data-processing-sources。就像这样：

<canvas ... data-processing-sources="file1.pde file2.pde file3.pde" ...>

可以看到这种方法没有在页面中写任何processing相关的代码。

方法二，在页面中嵌入processing代码

 <script type="text/processing"> 
      //  Processing.js example sketch
      int fontsize = 24;
 
      void setup() {
        size(200, 200);
        stroke(0);
        fill(0);
        textFont(createFont("Arial",fontsize));
        noLoop();
      }
 
      void draw() {
        background(#F0F0E0);
        String textstring = "inline example";
        float twidth = textWidth(textstring);
        text(textstring, (width-twidth)/2, height/2);
      }
 </script> 
 <canvas style="border: 1px solid black;"></canvas> 

processing程序被包裹在script标签内，该script标签的 type 属性为 "text/processing" 。这段processing代码的图形会渲染在紧跟着它的canvas元素上面。

方法三，上面的方法二中，canvas必须紧跟着script，要是只能这样联系二者就太不智能了，其实没必要，只要再为script设置另一个属性 data-processing-target， 指定一个canvasId 即可。

<script type="text/processing" data-processing-target="canvasId"> 
      //  Processing.js example sketch
      int fontsize = 24;
 
      void setup() {
        size(200, 200);
        stroke(0);
        fill(0);
        textFont(createFont("Arial",fontsize));
        noLoop();
      }
 
      void draw() {
        background(#F0F0E0);
        String textstring = "inline example";
        float twidth = textWidth(textstring);
        text(textstring, (width-twidth)/2, height/2);
      }
 </script> 
 ......
 <canvas id="canvasId" style="border: 1px solid black;"></canvas> 

以上代码源于  processing-js-1.3.0\example.html。 在下载的processingjs的包中就有。