html5 之 processing.js 学习笔记
processing.js是jquery之父的又一给力js内裤
直接点以下链接（用狐火和chrome打开可以预览效果）：
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></canvas></p>
<script 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></div>
canvas的api很基础，开发的时候一些底层的东西写起来有不便之处，用现成的框架就可以专注于效果上面，而不必重复发明轮子
processing的亮点在于它的代码是面向java的，你如果仔细的话，上面代码在script标签中出现了int,float，所以processing.js实现了一个js版的java转移器，将java代码转义成canvas的api,还有可能，如果本机已经支持java虚拟机，可能会直接使用processing的java,当然这只是猜测。
可能要考虑的问题，因为有转义这一过程，所以会存在一定开销问题，而且在firebug下是无法调试的，所以你的代码最好保证规范和简单，因为不知道会出现什么问题，processing版本目前还不知道是否稳定，到时候出现问题，就无法确定是你的问题还是库的问题，而且1万6千行的源代码，不是你一下能看完看懂的。
下载：
例子：
源代码里面：
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 只有api
processing-api-1.1.0.min.js processing-api-1.1.0压缩过的
相关文章
精彩导读
热门资讯
关注我们
