一。简介

Processing.js作者是John Resig，这是继Jquery之后，他的第二个力作。

Processing.js提供了教学可视化的编程语言和运行环境。通过编写处理程序，教师可以将复杂的物理，化学，数学原理形象化的展示给学生。替换为各种曲线图，波线，粒子，置换分子结构，当然在生理卫生课上还可以放置一群小蝌蚪在游泳等动态的图形。

Processing.js是一个开放的编程语言，在不使用Flash或Java小程序的初始化下，可以实现程序图像，动画和交互的应用 。Processing.js使用JavaScript绘制形状的锐利和操作HTML5 canvas元素产生图像动画。 Processing.js是轻量，易于了解掌握，并提出一个理想的工具，可视化的数据，创建用户界面和开发基于Web的游戏。

 

 

 

二。核心函数

JavaScript代码将内容复制到

//全局变量  

int 半径= 50.0;  

int  X，Y;  

int  nX，nY;  

int 延迟= 16;  

//设置处理画布初始化设置  

无效 setup（）{  

  大小（200，200）;  

  strokeWeight（10）;  

  frameRate（15）;  

  X =宽度/ 2;  

  Y =宽度/ 2;  

  nX = X;  

  nY = Y;   

}  

// Main draw loop主要绘画函数功能  

无效 draw（）{  

  半径=半径+ sin（frameCount / 4）;  

  //追踪圈子到新目的地  

  X + =（nX-X）/延迟;  

  Y + =（nY-Y）/延迟;  

  //将画布填充为灰色  

  背景（100）;  

  //将填充颜色设置为蓝色  

  填充（0，121，184）;  

  //将笔触颜色设置为白色  

  笔画（255）;  

  //画圆  

  椭圆（X，Y，radius，radius）;                   

}  

//设置圈子的下一个目的地当用户鼠标在Canvas移动时产生的动作  

void  mouseMoved（）{  

  nX = mouseX;  

  nY = mouseY;   

}  

 

三。世界最短的时钟代码诞生

JavaScript代码将内容复制到

无效 draw（）{  

size（200，200）; background（0）; 填充（80）; noStroke（）; 椭圆（100，100，160，160）; 笔画（255）;  

行（100，100，cos（TWO_PI * second（）/ 60- HALF_PI）* 70 + 100，sin（TWO_PI * second（）/ 60- HALF_PI）* 70 + 100）;  

行（100，100，cos（TWO_PI * minute（）/ 60- HALF_PI）* 60 + 100，sin（TWO_PI * minute（）/ 60- HALF_PI）* 60 + 100）;  

行（100，100，cos（TWO_PI *（hour（）％12）/ 12- HALF_PI）* 50 + 100，sin（TWO_PI *（hour（）％12）/ 12- HALF_PI）* 50 + 100）;  

}  

可以看得出，代码语意化非常强，一个圆，三条线，这也是这个框架所要达到的目的之一。

 

 

四。完整代码

XML / HTML代码将内容复制到文本

01  

<！DOCTYPE html >  

< html >  

<头>  

<身体>  

<脚本src = “ http://files.cnblogs.com/iamzhanglei/processing.js”类型= “文本/ javascript” > </脚本>    

<脚本类型= “应用程序/处理” >   

无效draw（）{  

size（200，200）; background（0）; 填充（80）; noStroke（）; 椭圆（100，100，160，160）; 笔画（255）;  

行（100，100，cos（TWO_PI * second（）/ 60- HALF_PI）* 70 + 100，sin（TWO_PI * second（）/ 60- HALF_PI）* 70 + 100）;  

行（100，100，cos（TWO_PI * minute（）/ 60- HALF_PI）* 60 + 100，sin（TWO_PI * minute（）/ 60- HALF_PI）* 60 + 100）;  

行（100，100，cos（TWO_PI *（hour（）％12）/ 12- HALF_PI）* 50 + 100，sin（TWO_PI *（hour（）％12）/ 12- HALF_PI）* 50 + 100）;  

}  

</脚本>  

< canvas >你的浏览器不支持HTML5，请使用谷歌，IE9或者火狐浏览器·· </ canvas >  

</ body >  

</ html >