html5 之 processing.js 学习札记-HTML教程-爱易网页

html5 之 processing.js 学习札记

日期：2014-05-17　浏览次数：20622 次

html5 之 processing.js 学习笔记
processing.js是jquery之父的又一给力js内裤

直接点以下链接（用狐火和chrome打开可以预览效果）：
http://processingjs.org

processing 最初是用java开发的，然后前段时间他又实现了js的java虚拟机,我正仰慕不已的时候，现在又出了processingjs,我总算知道做虚拟机的目的是为什么了，为了无论在什么条件下都能正常运行web引擎，大神真是无所不能。。。

使用processing.js,有三种方式:
第一种：

<script src="processing.js"></script> 
<canvas data-processing-sources="anything.pjs"></canvas>

void setup()
{
  size(200,200);
  background(125);
  fill(255);
  noLoop();
  PFont fontA = loadFont("courier");
  textFont(fontA, 14);  
}

void draw(){  
  text("Hello Web!",20,20);
  println("Hello ErrorLog!");
}

第二种：

<script src="processing.js"></script>
<script src="init.js"></script> 
<script type="application/processing">
void setup()
{
  size(200,200);
  background(125);
  fill(255);
  noLoop();
  PFont fontA = loadFont("courier");
  textFont(fontA, 14);  
}

void draw(){  
  text("Hello Web!",20,20);
  println("Hello ErrorLog!");
}
</script>
<canvas> </canvas> //notice no data-processing-sources attribute

第三种（牛人使用）：

<html>
<head>
  <script src="processing.js"></script>
</head>
<h1>Processing.js</h1>
<h2>Simple processing.js via JavaScript</h2>
<p>Clock</p>

<p><canvas id="canvas1" width="200" height="200"></canvas></p>

<script id="script1" type="text/javascript">

// Simple way to attach js code to the canvas is by using a function
function sketchProc(processing) {
  // Override draw function, by default it will be called 60 times per second
  processing.draw = function() {
    // determine center and max clock arm length
    var centerX = processing.width / 2, centerY = processing.height / 2;
    var maxArmLength = Math.min(centerX, centerY);

    function drawArm(position, lengthScale, weight) {      
      processing.strokeWeight(weight);
      processing.line(centerX, centerY, 
        centerX + Math.sin(position * 2 * Math.PI) * lengthScale * maxArmLength,
        centerY - Math.cos(position * 2 * Math.PI) * lengthScale * maxArmLength);
    }

    // erase background
    processing.background(224);

    var now = new Date();

    // Moving hours arm by small increments
    var hoursPosition = (now.getHours() % 12 + now.getMinutes() / 60) / 12;
    drawArm(hoursPosition, 0.5, 5);

    // Moving minutes arm by small increments
    var minutesPosition = (now.getMinutes() + now.getSeconds() / 60) / 60;
    drawArm(minutesPosition, 0.80, 3);

    // Moving hour arm by second increments
    var secondsPosition = now.getSeconds() / 60;
    drawArm(secondsPosition, 0.90, 1);
  };
  
}

var canvas = document.getElementById("canvas1");
// attaching the sketchProc function to the canvas
var p = new Processing(canvas, sketchProc);
// p.exit(); to detach it
</script>

<div style="height:0px;width:0px;overflow:hidden;"></div>

canvas的api很基础，开发的时候一些底层的东西写起来有不便之处，用现成的框架就可以专注于效果上面，而不必重复发明轮子

processing的亮点在于它的代码是面向java的，你如果仔细的话，上面代码在script标签中出现了int,float，所以processing.js实现了一个js版的java转移器，将java代码转义成canvas的api,还有可能，如果本机已经支持java虚拟机，可能会直接使用processing的java,当然这只是猜测。

可能要考虑的问题，因为有转义这一过程，所以会存在一定开销问题，而且在firebug下是无法调试的，所以你的代码最好保证规范和简单，因为不知道会出现什么问题，processing版本目前还不知道是否稳定，到时候出现问题，就无法确定是你的问题还是库的问题，而且1万6千行的源代码，不是你一下能看完看懂的。

下载：
http://processingjs.org/content/download/processing.js-1.1.0.zip
例子：
http://processingjs.org/content/download/processing-js-1.1.0-examples.zip

源代码里面：
processing-1.1.0.js 最全的版本，包括api和工具函数
processing-1.1.0.closure.js 方法和变量加密过的,把库命换一下，估计没人知道你是用processing开发的，它是里面最小的一个文件
processing-1.1.0.min.js processing-1.1.0压缩过的
processing-api-1.1.0.js 只有ap

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

html5 之 processing.js 学习札记

相关资料更多>

推荐阅读更多>