Canvas--粒子时钟

àì夳堔傛蜴生んèń 2022-05-31 05:26 330阅读 0赞 
  1. digit.js
  3. digit =
  5. [
  7. [
  8.             [0,0,1,1,1,0,0],
  9.             [0,1,1,0,1,1,0],
  10.             [1,1,0,0,0,1,1],
  11.             [1,1,0,0,0,1,1],
  12.             [1,1,0,0,0,1,1],
  13.             [1,1,0,0,0,1,1],
  14.             [1,1,0,0,0,1,1],
  15.             [1,1,0,0,0,1,1],
  16.             [0,1,1,0,1,1,0],
  17.             [0,0,1,1,1,0,0]
  18.         ],//0
  19.         [
  20.             [0,0,0,1,1,0,0],
  21.             [0,1,1,1,1,0,0],
  22.             [0,0,0,1,1,0,0],
  23.             [0,0,0,1,1,0,0],
  24.             [0,0,0,1,1,0,0],
  25.             [0,0,0,1,1,0,0],
  26.             [0,0,0,1,1,0,0],
  27.             [0,0,0,1,1,0,0],
  28.             [0,0,0,1,1,0,0],
  29.             [1,1,1,1,1,1,1]
  30.         ],//1
  31.         [
  32.             [0,1,1,1,1,1,0],
  33.             [1,1,0,0,0,1,1],
  34.             [0,0,0,0,0,1,1],
  35.             [0,0,0,0,1,1,0],
  36.             [0,0,0,1,1,0,0],
  37.             [0,0,1,1,0,0,0],
  38.             [0,1,1,0,0,0,0],
  39.             [1,1,0,0,0,0,0],
  40.             [1,1,0,0,0,1,1],
  41.             [1,1,1,1,1,1,1]
  42.         ],//2
  43.         [
  44.             [1,1,1,1,1,1,1],
  45.             [0,0,0,0,0,1,1],
  46.             [0,0,0,0,1,1,0],
  47.             [0,0,0,1,1,0,0],
  48.             [0,0,1,1,1,0,0],
  49.             [0,0,0,0,1,1,0],
  50.             [0,0,0,0,0,1,1],
  51.             [0,0,0,0,0,1,1],
  52.             [1,1,0,0,0,1,1],
  53.             [0,1,1,1,1,1,0]
  54.         ],//3
  55.         [
  56.             [0,0,0,0,1,1,0],
  57.             [0,0,0,1,1,1,0],
  58.             [0,0,1,1,1,1,0],
  59.             [0,1,1,0,1,1,0],
  60.             [1,1,0,0,1,1,0],
  61.             [1,1,1,1,1,1,1],
  62.             [0,0,0,0,1,1,0],
  63.             [0,0,0,0,1,1,0],
  64.             [0,0,0,0,1,1,0],
  65.             [0,0,0,1,1,1,1]
  66.         ],//4
  67.         [
  68.             [1,1,1,1,1,1,1],
  69.             [1,1,0,0,0,0,0],
  70.             [1,1,0,0,0,0,0],
  71.             [1,1,1,1,1,1,0],
  72.             [0,0,0,0,0,1,1],
  73.             [0,0,0,0,0,1,1],
  74.             [0,0,0,0,0,1,1],
  75.             [0,0,0,0,0,1,1],
  76.             [1,1,0,0,0,1,1],
  77.             [0,1,1,1,1,1,0]
  78.         ],//5
  79.         [
  80.             [0,0,0,0,1,1,0],
  81.             [0,0,1,1,0,0,0],
  82.             [0,1,1,0,0,0,0],
  83.             [1,1,0,0,0,0,0],
  84.             [1,1,0,1,1,1,0],
  85.             [1,1,0,0,0,1,1],
  86.             [1,1,0,0,0,1,1],
  87.             [1,1,0,0,0,1,1],
  88.             [1,1,0,0,0,1,1],
  89.             [0,1,1,1,1,1,0]
  90.         ],//6
  91.         [
  92.             [1,1,1,1,1,1,1],
  93.             [1,1,0,0,0,1,1],
  94.             [0,0,0,0,1,1,0],
  95.             [0,0,0,0,1,1,0],
  96.             [0,0,0,1,1,0,0],
  97.             [0,0,0,1,1,0,0],
  98.             [0,0,1,1,0,0,0],
  99.             [0,0,1,1,0,0,0],
  100.             [0,0,1,1,0,0,0],
  101.             [0,0,1,1,0,0,0]
  102.         ],//7
  103.         [
  104.             [0,1,1,1,1,1,0],
  105.             [1,1,0,0,0,1,1],
  106.             [1,1,0,0,0,1,1],
  107.             [1,1,0,0,0,1,1],
  108.             [0,1,1,1,1,1,0],
  109.             [1,1,0,0,0,1,1],
  110.             [1,1,0,0,0,1,1],
  111.             [1,1,0,0,0,1,1],
  112.             [1,1,0,0,0,1,1],
  113.             [0,1,1,1,1,1,0]
  114.         ],//8
  115.         [
  116.             [0,1,1,1,1,1,0],
  117.             [1,1,0,0,0,1,1],
  118.             [1,1,0,0,0,1,1],
  119.             [1,1,0,0,0,1,1],
  120.             [0,1,1,1,0,1,1],
  121.             [0,0,0,0,0,1,1],
  122.             [0,0,0,0,0,1,1],
  123.             [0,0,0,0,1,1,0],
  124.             [0,0,0,1,1,0,0],
  125.             [0,1,1,0,0,0,0]
  126.         ],//9
  127.         [
  128.             [0,0,0,0],
  129.             [0,0,0,0],
  130.             [0,1,1,0],
  131.             [0,1,1,0],
  132.             [0,0,0,0],
  133.             [0,0,0,0],
  134.             [0,1,1,0],
  135.             [0,1,1,0],
  136.             [0,0,0,0],
  137.             [0,0,0,0]
  138.         ]//:
  139.     ];
  143. <!DOCTYPE html>
  144. <html lang="en">
  145. <head>
  146.     <meta charset="UTF-8">
  147.     <title>CanvasColock粒子时钟</title>
  148.     <style>
  149.         body{
  150.             background: greenyellow;
  151.         }
  152.     </style>
  153. </head>
  154. <body style="height:100%">
  155.     <canvas id="canvas" style="height:100%;"></canvas>
  156. </body>
  157. <script type="text/javascript" src="js/digit.js"></script>
  158. <script type="text/javascript">
  159.     var WINDOW_WIDTH;
  160.     var WINDOW_HEIGHT;
  161.     var RADIUS;
  162.     var context=canvas.getContext("2d");
  163.     var MARGIN_TOP;
  164.     var MARGIN_LEFT;
  165.     var showtime=new Date();
  166.     var balls=[];
  167.     const colors=["#51F511","#66FAD5","#EF1C3E","#FFFA5F","#DE48CD","#310CF2"];
  168.     window.onload=function(){
  169.         WINDOW_WIDTH=document.documentElement.clientWidth;
  170.         WINDOW_HEIGHT=document.documentElement.clientHeight;
  171.         MARGIN_LEFT=Math.round(WINDOW_WIDTH/10);
  172.         MARGIN_TOP=Math.round(WINDOW_HEIGHT/5);
  173.         RADIUS=Math.round(WINDOW_WIDTH*4/5/108)-1;
  174.         var canvas=document.getElementById("canvas");
  175.         showtime=new Date();
  176.         canvas.width=WINDOW_WIDTH;
  177.         canvas.height=WINDOW_HEIGHT;
  178.         setInterval(function(){
  179.             render(context);
  180.             update();
  181.         },50);
  182.     }
  183.     function render(cxt){
  184.         cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);
  185.         var hours=parseInt(showtime.getHours());
  186.         var minutes=parseInt(showtime.getMinutes());
  187.         var seconds=parseInt(showtime.getSeconds());
  188.         renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),cxt);
  189.         renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt);
  190.         renderDigit(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,cxt);
  191.         renderDigit(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),cxt);
  192.         renderDigit(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),cxt);
  193.         renderDigit(MARGIN_LEFT+69*(RADIUS+1),MARGIN_TOP,10,cxt);
  194.         renderDigit(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),cxt);
  195.         renderDigit(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10),cxt);
  196.         for(var i=0;i<balls.length;i++){
  197.             cxt.fillStyle=balls[i].color;
  198.             cxt.beginPath();
  199.             cxt.arc(balls[i].x,balls[i].y,RADIUS,0,2*Math.PI,true);
  200.             cxt.closePath();
  201.             cxt.fill();
  202.         }
  203.     }
  204.     function renderDigit(x,y,num,cxt){
  205.         cxt.fillStyle="rgb(0,102,153)";
  206.         for(var i=0;i<digit[num].length;i++)
  207.             for(var j=0;j<digit[num][i].length;j++)
  208.                 if(digit[num][i][j]==1){
  209.                     cxt.beginPath()
  210.                     cxt.arc(x+(RADIUS+1)+j*2*(RADIUS+1),y+(RADIUS+1)+i*2*(RADIUS+1),RADIUS,0,2*Math.PI);
  211.                     cxt.closePath();
  212.                     cxt.fill();
  213.                 }
  214.     }
  215.     function update(){
  216.         var nextTime=new Date();
  217.         var nexttimehours=parseInt(nextTime.getHours());
  218.         var nexttimeminutes=parseInt(nextTime.getMinutes());
  219.         var nexttimeseconds=parseInt(nextTime.getSeconds());
  220.         var showtimehours=parseInt(showtime.getHours());
  221.         var showtimeminutes=parseInt(showtime.getMinutes());
  222.         var showtimeseconds=parseInt(showtime.getSeconds());
  223.         if(nextTime!=showtime){
  224.         if(parseInt(nexttimehours/10)!=parseInt(showtimehours/10)){
  225.             addballs(MARGIN_LEFT,MARGIN_TOP,parseInt(nexttimehours/10));
  226.         };
  227.         if(parseInt(nexttimehours%10)!=parseInt(showtimehours%10)){
  228.             addballs(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(nexttimehours%10));
  229.         };
  230.         if(parseInt(nexttimeminutes/10)!=parseInt(showtimeminutes/10)){
  231.             addballs(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(nexttimeminutes/10));
  232.         };
  233.         if(parseInt(nexttimeminutes%10)!=parseInt(showtimeminutes%10)){
  234.             addballs(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(nexttimeminutes%10));
  235.         };
  236.         if(parseInt(nexttimeseconds/10)!=parseInt(showtimeseconds/10)){
  237.             addballs(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(nexttimeseconds/10));
  238.         };
  239.         if(parseInt(nexttimeseconds%10)!=parseInt(showtimeseconds%10)){
  240.             addballs(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(nexttimeseconds%10));
  241.         };}
  242.         showtime=nextTime;
  243.         updateBalls();
  244.     }
  245.     function updateBalls(){
  246.         for(var i=0;i<balls.length;i++){
  247.             balls[i].x +=balls[i].vx;
  248.             balls[i].y +=balls[i].vy;
  249.             balls[i].vy +=balls[i].g;
  250.             if(balls[i].y> WINDOW_HEIGHT - RADIUS){
  251.                 balls[i].y=WINDOW_HEIGHT -RADIUS;
  252.                 balls[i].vy=-balls[i].vy*0.6;
  253.             }
  254.         }
  255.         var ballscontol=0;
  256.         for(i=0;i<balls.length;i++)
  257.             if (balls[i].x + RADIUS>0&&balls[i].x - RADIUS<WINDOW_WIDTH) {
  258.                 balls[ballscontol++]=balls[i]
  259.             }
  260.         while(balls.length>Math.min(ballscontol,300)){
  261.             balls.pop();
  262.         }
  263.     }
  264.     function addballs(x,y,num){
  265.         for(var i=0;i<digit[num].length;i++)
  266.             for(var j=0;j<digit[num][i].length;j++)
  267.                 if(digit[num][i][j]==1){
  268.                     var newball={
  269.                         x : x+(RADIUS+1)+j*2*(RADIUS+1),
  270.                         y : y+(RADIUS+1)+i*2*(RADIUS+1),
  271.                         g : 1.5+Math.random(),
  272.                         vx :Math.pow(-1,Math.floor(Math.random()*100))*5,
  273.                         vy : -Math.ceil(Math.random()*10),
  274.                         color :colors[Math.floor(Math.random()*colors.length)]
  275.                     }
  276.                     balls.push(newball);
  277.                 }
  278.     }
  279. </script>
  280. </html>

运行效果图

70

发表评论

表情：
评论列表 （有 0 条评论，330人围观）

还没有评论，来说两句吧...

相关阅读