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 functionfunction 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 canvasvar p = new Processing(canvas, sketchProc);// p.exit(); to detach it</script><div style="height:0px;width:0px;overflow:hidden;"></div>