首頁 > 開發者 > JavaScript

世界上最短的時鐘代碼！更短的，有木有？

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

 

一.簡介

Processing.js作者是John Resig，這是繼Jquery之後，他的第二個力作。

 

Processing.js提供了教學可視化的程式設計語言及運行環境。通過編寫processing程式，教師可以將複雜的物理、化學、數學原理形象的展示給學生。比如繪製各種曲線圖，波線，粒子，繪製分子結構，當然在生理衛生課上還可以繪製一群小蝌蚪在遊泳等動態圖形。

 

Processing.js是一個開放的程式設計語言，在不使用Flash或Java小程式的前提下, 可以實現程式映像、動畫和互動的應用。

Processing.js使用JavaScript繪製形狀sharp和操作HTML5 canvas元素產生映像動畫。

Processing.js是輕量，易於瞭解掌握，並提出一個理想的工具，可視化的資料，建立使用者介面和開發基於Web的遊戲。

 

 

 

 

 

二.核心函數

view sourceprint?01 // Global variables 全域變數 

 

02 int radius = 50.0; 

 

03 int X, Y; 

 

04 int nX, nY; 

 

05 int delay = 16; 

 

06   

 

07 // Setup the Processing Canvas初始化設定 

 

08 void setup(){ 

 

09   size( 200, 200 ); 

 

10   strokeWeight( 10 ); 

 

11   frameRate( 15 ); 

 

12   X = width / 2; 

 

13   Y = width / 2; 

 

14   nX = X; 

 

15   nY = Y;   

 

16 } 

 

17   

 

18 // Main draw loop 主要繪畫函數功能 

 

19 void draw(){ 

 

20     

 

21   radius = radius + sin( frameCount / 4 ); 

 

22     

 

23   // Track circle to new destination 

 

24   X+=(nX-X)/delay; 

 

25   Y+=(nY-Y)/delay; 

 

26     

 

27   // Fill canvas grey 

 

28   background( 100 ); 

 

29     

 

30   // Set fill-color to blue 

 

31   fill( 0, 121, 184 ); 

 

32     

 

33   // Set stroke-color white 

 

34   stroke(255);  

 

35     

 

36   // Draw circle 

 

37   ellipse( X, Y, radius, radius );                   

 

38 } 

 

39   

 

40   

 

41 // Set circle's next destination 當使用者滑鼠在Canvas移動時產生的action 

 

42 void mouseMoved(){ 

 

43   nX = mouseX; 

 

44   nY = mouseY;   

 

45 }

 

 

 

 

 

三.世界最短的時鐘代碼誕生

view sourceprint?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 }

 

可以看得出，代碼語意化非常強，一個圓，三條線，這也是這個架構所要達到的目的之一。

 

 

 

 

 

四.完整代碼

view sourceprint?01 <!DOCTYPE html> 

 

02 <html> 

 

03 <head> 

 

04     <body> 

 

05      <script src="http://files.cnblogs.com/iamzhanglei/processing.js" type="text/javascript"></script> 

 

06         <script type="application/processing"> 

 

07 void draw() { 

 

08   size(200, 200);background(0); fill(80); noStroke(); ellipse(100, 100, 160, 160); stroke(255); 

 

09   line(100, 100, cos( TWO_PI*second()/60- HALF_PI) * 70 + 100, sin(TWO_PI*second()/60- HALF_PI) * 70 + 100); 

 

10   line(100, 100, cos( TWO_PI*minute()/60- HALF_PI) * 60 + 100, sin(TWO_PI*minute()/60- HALF_PI) * 60 + 100); 

 

11   line(100, 100, cos(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100, sin(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100); 

 

12 } 

 

13         </script> 

 

14         <canvas>你的瀏覽器不支援HTML5,請使用Google、IE9或者Firefox瀏覽器··</canvas> 

 

15     </body> 

 

16 </html>

 

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More