html5中文学习网

您的位置: 首页 > html5教程 > 高级应用 » 正文

世界上最短的时钟代码!更短的,有木有?

[ ] 已经帮助:人解决问题

一.简介QNBHTML5中文学习网 - HTML5先行者学习网

Processing.js作者是John Resig,这是继Jquery之后,他的第二个力作。QNBHTML5中文学习网 - HTML5先行者学习网

Processing.js提供了教学可视化的编程语言及运行环境。通过编写processing程序,教师可以将复杂的物理、化学、数学原理形象的展示给学生。比如绘制各种曲线图,波线,粒子,绘制分子结构,当然在生理卫生课上还可以绘制一群小蝌蚪在游泳等动态的图形。QNBHTML5中文学习网 - HTML5先行者学习网

Processing.js是一个开放的编程语言,在不使用Flash或Java小程序的前提下, 可以实现程序图像、动画和互动的应用。 QNBHTML5中文学习网 - HTML5先行者学习网
Processing.js使用JavaScript绘制形状sharp和操作HTML5 canvas元素产生图像动画。 QNBHTML5中文学习网 - HTML5先行者学习网
Processing.js是轻量,易于了解掌握,并提出一个理想的工具,可视化的数据,创建用户界面和开发基于Web的游戏。QNBHTML5中文学习网 - HTML5先行者学习网

 QNBHTML5中文学习网 - HTML5先行者学习网

 QNBHTML5中文学习网 - HTML5先行者学习网

二.核心函数

JavaScript Code复制内容到剪贴板
  1. // Global variables 全局变量  
  2. int radius = 50.0;  
  3. int X, Y;  
  4. int nX, nY;  
  5. int delay = 16;  
  6. // Setup the Processing Canvas初始化设置  
  7. void setup(){  
  8.   size( 200, 200 );  
  9.   strokeWeight( 10 );  
  10.   frameRate( 15 );  
  11.   X = width / 2;  
  12.   Y = width / 2;  
  13.   nX = X;  
  14.   nY = Y;   
  15. }  
  16. // Main draw loop 主要绘画函数功能  
  17. void draw(){  
  18.   radius = radius + sin( frameCount / 4 );  
  19.   // Track circle to new destination  
  20.   X+=(nX-X)/delay;  
  21.   Y+=(nY-Y)/delay;  
  22.   // Fill canvas grey  
  23.   background( 100 );  
  24.   // Set fill-color to blue  
  25.   fill( 0, 121, 184 );  
  26.   // Set stroke-color white  
  27.   stroke(255);  
  28.   // Draw circle  
  29.   ellipse( X, Y, radius, radius );                   
  30. }  
  31. // Set circle's next destination 当用户鼠标在 Canvas移动时产生的action  
  32. void mouseMoved(){  
  33.   nX = mouseX;  
  34.   nY = mouseY;   
  35. }  

 QNBHTML5中文学习网 - HTML5先行者学习网

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

JavaScript Code复制内容到剪贴板
  1. void draw() {  
  2. size(200, 200);background(0); fill(80); noStroke(); ellipse(100, 100, 160, 160); stroke(255);  
  3. line(100, 100, cos( TWO_PI*second()/60- HALF_PI) * 70 + 100, sin(TWO_PI*second()/60- HALF_PI) * 70 + 100);  
  4. line(100, 100, cos( TWO_PI*minute()/60- HALF_PI) * 60 + 100, sin(TWO_PI*minute()/60- HALF_PI) * 60 + 100);  
  5. line(100, 100, cos(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100, sin(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100);  
  6. }  

可以看得出,代码语意化非常强,一个圆,三条线,这也是这个框架所要达到的目的之一。QNBHTML5中文学习网 - HTML5先行者学习网

 QNBHTML5中文学习网 - HTML5先行者学习网

 QNBHTML5中文学习网 - HTML5先行者学习网

四.完整代码

XML/HTML Code复制内容到剪贴板
  1. 01  
  2. <!DOCTYPE html>  
  3. <html>  
  4. <head>  
  5. <body>  
  6. <script src="http://files.cnblogs.com/iamzhanglei/processing.js" type="text/javascript"></script>  
  7. <script type="application/processing">  
  8. void draw() {  
  9. size(200, 200);background(0); fill(80); noStroke(); ellipse(100, 100, 160, 160); stroke(255);  
  10. line(100, 100, cos( TWO_PI*second()/60- HALF_PI) * 70 + 100, sin(TWO_PI*second()/60- HALF_PI) * 70 + 100);  
  11. line(100, 100, cos( TWO_PI*minute()/60- HALF_PI) * 60 + 100, sin(TWO_PI*minute()/60- HALF_PI) * 60 + 100);  
  12. line(100, 100, cos(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100, sin(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100);  
  13. }  
  14. </script>  
  15. <canvas>你的浏览器不支持HTML5,请使用谷歌、IE9或者火狐浏览器··</canvas>  
  16. </body>  
  17. </html>  
(责任编辑:html5先行者
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助