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 只有api
processing-api-1.1.0.min.js processing-api-1.1.0压缩过的
分享到：
相关推荐
在"html css js网页制作实例processing-开发笔记p"这个主题中，我们将深入探讨这三个关键领域的基本概念、实践技巧以及如何将它们整合到网页开发过程中。 首先，HTML（HyperText Markup Language）是网页内容的基础...
### LotusDomino学习笔记知识点概览 #### 1. 选取视图的列的内容 (@Trim @DbColumn) - **@Trim**: 是一个内置的LotusScript函数，用于去除字符串两端的空白字符。 - **@DbColumn**: 此函数用于获取指定列的信息。...
JavaScript DOM 学习笔记 JavaScript DOM（Document Object Model）是 HTML 和 XML 文档的编程接口，它提供了一种访问和操作文档结构和内容的方式。DOM 将文档表示为一个树状结构，其中每个节点都代表文档中的一个...
在“数据库课程设计e-processing-mai开发笔记”中，我们可以探讨与数据库管理和系统开发相关的多个重要知识点。这个项目可能涉及到数据库的设计、实现以及一个名为“e-processing-mai”的应用程序的开发，这可能是一...
5. 链接JS文件 6 6. 删除文档的方法 7 7. $$return 域的使用 8 8. 将表单设计为视图或导航器模板 9 9. 为 Web 定制“表单已处理”确认信息 10 10. 定制出错信息 11 11. $$HtmlHead几种常用的技巧 ...
总之，“age-processing开发笔记”是一个融合了Bootstrap响应式设计、HTML结构、JavaScript交互和可能的图像处理技术的项目。通过学习和实践这个作业，开发者可以提升在创建现代、用户友好的网页应用方面的技能。
5. 链接JS文件 6 6. 删除文档的方法 7 7. $$return 域的使用 8 8. 将表单设计为视图或导航器模板 9 9. 为 Web 定制“表单已处理”确认信息 10 10. 定制出错信息 11 11. $$HtmlHead几种常用的技巧 11 12. Domino ...
p5.js是一个开源的JavaScript库，灵感来源于 Processing，它让艺术家、设计师、程序员和初学者能够方便地在Web浏览器中进行创意编码。p5.js提供了丰富的图形绘制函数，使得动态视觉和交互设计变得简单易行。 而p5....
这个压缩包内的“ahao2”可能是一个文件夹或者文件，它可能包含了以上各个领域的实际代码示例、项目案例、教程或笔记，可以帮助学习者深入理解和实践这些领域的技术。通过研究这些资源，无论是初学者还是经验丰富的...
浏览器是一种用于浏览互联网资源的软件，支持HTML、CSS、JavaScript等标准。 #### Bus line 总线是连接计算机内部各部件的通道，用于数据和指令的传输。 #### Backup tape cartridge units 备份磁带盒单元是一种...