Processing.js 介绍
Processing.js是一个开放的编程语言，在不使用Flash或Java小程序的前提下, 可以实现程序图像、动画和互动的应用。
Processing.js使用JavaScript绘制形状sharp和操作HTML5 canvas元素产生图像动画。
Processing.js是轻量，易于了解掌握，并提出一个理想的工具，可视化的数据，创建用户界面和开发基于Web的游戏。
Processing.js可以运行在FireFox, Safari, Opera, Chrome(因为支持HTML5
canvas)，将也会工作Internet
Explorer(通过ExplorerCanvas(http://excanvas.sourceforge.net/)).
Processing 语法非常类似Java，主要有setup() draw() exit()
mouseMoved()/mousepressed()几个函数。
// Global variables 全局变量 int radius = 50.0; int X, Y; int nX, nY; int delay = 16; // Setup the Processing Canvas初始化设置 void setup(){ size( 200, 200 ); strokeWeight( 10 ); frameRate( 15 ); X = width / 2; Y = width / 2; nX = X; nY = Y; } // Main draw loop 主要绘画函数功能 void draw(){ radius = radius + sin( frameCount / 4 ); // Track circle to new destination X+=(nX-X)/delay; Y+=(nY-Y)/delay; // Fill canvas grey background( 100 ); // Set fill-color to blue fill( 0, 121, 184 ); // Set stroke-color white stroke(255); // Draw circle ellipse( X, Y, radius, radius ); } // Set circle's next destination 当用户鼠标在 Canvas移动时产生的action void mouseMoved(){ nX = mouseX; nY = mouseY; }
Processing.js网站:
http://processingjs.org/
案例源码下载：http://processingjs.org/source/basic-example/processingjs_basic- example.zip