zoukankan      html  css  js  c++  java
  • 世界上最短的时钟代码!更短的,有木有?

    一.简介

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

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

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

    二.核心函数

    // 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;
    }

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

    void draw() {
    size(200, 200);background(0); fill(80); noStroke(); ellipse(100, 100, 160, 160); stroke(255);
    line(100, 100, cos( TWO_PI*second()/60- HALF_PI) * 70 + 100, sin(TWO_PI*second()/60- HALF_PI) * 70 + 100);
    line(100, 100, cos( TWO_PI*minute()/60- HALF_PI) * 60 + 100, sin(TWO_PI*minute()/60- HALF_PI) * 60 + 100);
    line(100, 100, cos(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100, sin(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100);
    }

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

    四.完整代码

    <!DOCTYPE html>
    <html>
    <head>
    <body>
    <script src="https://files.cnblogs.com/iamzhanglei/processing.js" type="text/javascript"></script>
    <script type="application/processing">
    void draw() {
    size(200, 200);background(0); fill(80); noStroke(); ellipse(100, 100, 160, 160); stroke(255);
    line(100, 100, cos( TWO_PI*second()/60- HALF_PI) * 70 + 100, sin(TWO_PI*second()/60- HALF_PI) * 70 + 100);
    line(100, 100, cos( TWO_PI*minute()/60- HALF_PI) * 60 + 100, sin(TWO_PI*minute()/60- HALF_PI) * 60 + 100);
    line(100, 100, cos(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100, sin(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100);
    }
    </script>
    <canvas>你的浏览器不支持HTML5,请使用谷歌、IE9或者火狐浏览器··</canvas>
    </body>
    </html>

    五.在线演示

    你的浏览器不支持HTML5,请使用谷歌、IE9或者火狐浏览器··

    六.同步

    本文已同步更新至:

    HTML5实验室【目录】:   http://www.cnblogs.com/iamzhanglei/archive/2011/11/06/2237870.html

  • 相关阅读:
    MinDoc v0.6 发布,轻量级文档在线管理系统
    PostMessage和SendMessage有什么区别?(有EnumChildWindowsProc的例子)
    将QuickReport报表保存为图片(使用TMetaFile和TMetafileCanvas)
    如何将JPEG缩略图放到LISTVIEW中(delphi listview自绘图形)
    栈和队列
    SQL调优日志--内存问题
    Nancy之实现API
    JAVA和.NET互调用
    NET Core环境并创建运行ASP.NET网站
    React Native
  • 原文地址:https://www.cnblogs.com/iamzhanglei/p/2213846.html
Copyright © 2011-2022 走看看