html5 之 processing.js 学习笔记

processing.js是jquery之父的又一给力js内裤

直接点以下链接(用狐火和chrome打开可以预览效果):
[url]http://processingjs.org[/url]

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千行的源代码,不是你一下能看完看懂的。


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

源代码里面:
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压缩过的
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值