html5 Canvas绘图与动画效果实例

你想学习具体的制作过程，推荐你去慕课看看免费的视频教程。

效果预览：

http://www.linuxidc.com/yanshi/2015/03/Canvas/index.html

Html代码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  2. <html xmlns="http://www.w3.org/1999/xhtml">

  3.  <head>

  4.   <title> new document </title>

  5.   <meta name="generator" content="editplus" />

  6.   <meta name="author" content="" />

  7.   <meta name="keywords" content="" />

  8.   <meta name="description" content="" />

  9.  </head>

  10. <style type="text/css">

  11.     html,body{height:100%}

  12. </style>

  13.  <body>

  14.   <canvas id="canvas" style="height:100%">

  15.   当前浏览器不支持Canvas

  16.   </canvas>

  17.  </body>

  18. </html>

  19. <script type="text/javascript" src="digit.js"></script>

  20. <script type="text/javascript" src="clockdown.js"></script>

逻辑代码：clockdown.js

  1. var WINDOW_WIDTH=1024;
  2. var WINDOW_HEIGHT=600;
  3. var MARGIN_TOP=60;
  4. var MARGIN_LEFT=30;
  5. //存放彩色小球
  6. var balls=[];
  7.  
  8. const colors=["#33B5E5","#0099CC","#AA66CC","#669900","#FFBB33","#FF8800","#FF4444","CC0000"];
  9. var r=8;//圆半径
  10.     window.onload=function(){
  11.     WINDOW_WIDTH=document.body.clientWidth;
  12. WINDOW_HEIGHT=document.body.clientHeight;
  13. MARGIN_LEFT=Math.round(WINDOW_WIDTH/10);
  14. r=Math.round(WINDOW_WIDTH*4/5/108)-1;
  15.     var canvas=document.getElementById("canvas");
  16.     var context=canvas.getContext("2d");
  17.     canvas.width=WINDOW_WIDTH;
  18.     canvas.height=WINDOW_HEIGHT;
  19.  
  20.     window.setInterval(function(){
  21.        var curr=new Date();
  22.        var curHours=curr.getHours();
  23.        var curMinutes=curr.getMinutes();
  24.        var curSeconds=curr.getSeconds();
  25.  
  26.        //当时间的秒数改变时添加彩色小球
  27.        if(preSeconds!=curSeconds)
  28.        {
  29.  
  30.         if(parseInt(curHours/10)!=parseInt(preHours/10)){
  31.         addBall(MARGIN_LEFT,MARGIN_TOP,parseInt(curHours/10));     
  32.         }
  33.           if(parseInt(curHours%10)!=parseInt(preHours%10)){
  34.         addBall(MARGIN_LEFT+15*(r+1),MARGIN_TOP,parseInt(curHours%10));    
  35.         }
  36.          if(parseInt(curMinutes/10)!=parseInt(preMinutes/10)){
  37.         addBall(MARGIN_LEFT+39*(r+1),MARGIN_TOP,parseInt(curMinutes/10));      
  38.         }
  39.           if(parseInt(curMinutes%10)!=parseInt(preMinutes%10)){
  40.         addBall(MARGIN_LEFT+54*(r+1),MARGIN_TOP,parseInt(curMinutes%10));      
  41.         }
  42.  
  43.          if(parseInt(curSeconds/10)!=parseInt(preSeconds/10)){
  44.         addBall(MARGIN_LEFT+78*(r+1),MARGIN_TOP,parseInt(curSeconds/10));      
  45.         }
  46.           if(parseInt(curSeconds%10)!=parseInt(preSeconds%10)){
  47.         addBall(MARGIN_LEFT+93*(r+1),MARGIN_TOP,parseInt(curSeconds%10));      
  48.         }      
  49.        }
  50.        render(context);
  51.  
  52.         },50);
  53.  
  54.     }
  55.  
  56.     //添加小球(数字num上的彩色小球，x，y:数字方块容器的左上角顶点坐标)
  57.     function addBall(x,y,num){
  58.          for (var i=0;i<digit[num].length ;i++ )
  59.          {
  60.              for (var j=0;j<digit[num][i].length ;j++ )
  61.              {
  62.                  if(digit[num][i][j]==1){
  63.  
  64.                      var ball={
  65.                      x:x+j*2*(r+1)+r+1,
  66.                      y:y+i*2*(r+1)+r+1,                    
  67.                      g:1.5+Math.random(),
  68.                      vx:Math.pow(-1,Math.ceil(Math.random()*1000))*9,//结果为-10/10
  69.                      vy:-10,
  70.                      color:colors[Math.floor(Math.random()*colors.length)]
  71.                      };
  72.                      balls.push(ball);
  73.  
  74.                  }
  75.              }
  76.          }
  77.     }
  78.   //----画彩色小球
  79.   function renderBalls(context){
  80.             //context.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT)
  81.      for (var i=0;i<balls.length ;i++ )
  82.      {
  83.         context.beginPath();
  84.         context.arc(balls[i].x,balls[i].y,r,0,2*Math.PI,false);
  85.         context.fillStyle=balls[i].color;
  86.         context.fill();
  87.         context.closePath();
  88.      }
  89.   }
  90.  
  91.  //----更新彩色小球位置
  92.   function UpdateBalls(){
  93.       var count=0;
  94.    for (var i=0;i<balls.length ;i++ )
  95.      {
  96.      balls[i].x+=balls[i].vx;
  97.      balls[i].y+=balls[i].vy;
  98.      balls[i].vy+=balls[i].g;
  99.      if(balls[i].y+r>=WINDOW_HEIGHT){
  100.      balls[i].y=WINDOW_HEIGHT-r;
  101.      balls[i].vy=-balls[i].vy*0.7;  
  102.      }
  103.  
  104.      if(balls[i].x+r>0&&balls[i].x-r<WINDOW_WIDTH){
  105.      balls[count++]=balls[i];}
  106.  
  107.      }
  108.      //移除溢出的小球
  109.      while(balls.length>count){balls.pop();}
  110.   }
  111.  
  112.  
  113.     var preHours;
  114.     var preMinutes;
  115.     var preSeconds;
  116.  
  117.     //渲染整个画布
  118.     function render(context)
  119.     {
  120.         context.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT)
  121.         var now=new Date();
  122.         var hours=now.getHours();
  123.         var minutes=now.getMinutes();
  124.         var seconds=now.getSeconds();
  125.         preHours=hours;
  126.         preMinutes=minutes;
  127.         preSeconds=seconds;
  128.         //---时
  129.         renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),context);
  130.         renderDigit(MARGIN_LEFT+15*(r+1),MARGIN_TOP,hours%10,context);
  131.         renderDigit(MARGIN_LEFT+30*(r+1),MARGIN_TOP,10,context);
  132.         //---分
  133.         renderDigit(MARGIN_LEFT+39*(r+1),MARGIN_TOP,parseInt(minutes/10),context);
  134.         renderDigit(MARGIN_LEFT+54*(r+1),MARGIN_TOP,minutes%10,context);
  135.         renderDigit(MARGIN_LEFT+69*(r+1),MARGIN_TOP,10,context);
  136.         //---秒
  137.         renderDigit(MARGIN_LEFT+78*(r+1),MARGIN_TOP,parseInt(seconds/10),context);
  138.         renderDigit(MARGIN_LEFT+93*(r+1),MARGIN_TOP,seconds%10,context);
  139.         //---画小球
  140.         renderBalls(context);
  141.         //---改变小球路径
  142.         UpdateBalls();
  143.  
  144.         console.log(balls.length);
  145.  
  146.     }
  147.     //渲染每个数字
  148.     function renderDigit(x,y,num,context)
  149.     {
  150.     context.fillStyle="green";
  151.     for (var i=0;i<digit[num].length ; i++)
  152.     {
  153.         for (var j=0;j<digit[num][i].length ;j++ )
  154.         {
  155.             if(digit[num][i][j]==1){
  156.             context.beginPath();
  157.             context.arc(x+j*2*(r+1)+r+1,y+i*2*(r+1)+r+1,r,0,2*Math.PI,false);
  158.             context.closePath();
  159.             context.fill();
  160.             }
  161.         }
  162.     }
  163.     }

数字的结构定义：digit.js

  1. digit =
  2.     [
  3.         [
  4.             [0,0,1,1,1,0,0],
  5.             [0,1,1,0,1,1,0],
  6.             [1,1,0,0,0,1,1],
  7.             [1,1,0,0,0,1,1],
  8.             [1,1,0,0,0,1,1],
  9.             [1,1,0,0,0,1,1],
  10.             [1,1,0,0,0,1,1],
  11.             [1,1,0,0,0,1,1],
  12.             [0,1,1,0,1,1,0],
  13.             [0,0,1,1,1,0,0]
  14.         ],//0
  15.         [
  16.             [0,0,0,1,1,0,0],
  17.             [0,1,1,1,1,0,0],
  18.             [0,0,0,1,1,0,0],
  19.             [0,0,0,1,1,0,0],
  20.             [0,0,0,1,1,0,0],
  21.             [0,0,0,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.             [1,1,1,1,1,1,1]
  26.         ],//1
  27.         [
  28.             [0,1,1,1,1,1,0],
  29.             [1,1,0,0,0,1,1],
  30.             [0,0,0,0,0,1,1],
  31.             [0,0,0,0,1,1,0],
  32.             [0,0,0,1,1,0,0],
  33.             [0,0,1,1,0,0,0],
  34.             [0,1,1,0,0,0,0],
  35.             [1,1,0,0,0,0,0],
  36.             [1,1,0,0,0,1,1],
  37.             [1,1,1,1,1,1,1]
  38.         ],//2
  39.         [
  40.             [1,1,1,1,1,1,1],
  41.             [0,0,0,0,0,1,1],
  42.             [0,0,0,0,1,1,0],
  43.             [0,0,0,1,1,0,0],
  44.             [0,0,1,1,1,0,0],
  45.             [0,0,0,0,1,1,0],
  46.             [0,0,0,0,0,1,1],
  47.             [0,0,0,0,0,1,1],
  48.             [1,1,0,0,0,1,1],
  49.             [0,1,1,1,1,1,0]
  50.         ],//3
  51.         [
  52.             [0,0,0,0,1,1,0],
  53.             [0,0,0,1,1,1,0],
  54.             [0,0,1,1,1,1,0],
  55.             [0,1,1,0,1,1,0],
  56.             [1,1,0,0,1,1,0],
  57.             [1,1,1,1,1,1,1],
  58.             [0,0,0,0,1,1,0],
  59.             [0,0,0,0,1,1,0],
  60.             [0,0,0,0,1,1,0],
  61.             [0,0,0,1,1,1,1]
  62.         ],//4
  63.         [
  64.             [1,1,1,1,1,1,1],
  65.             [1,1,0,0,0,0,0],
  66.             [1,1,0,0,0,0,0],
  67.             [1,1,1,1,1,1,0],
  68.             [0,0,0,0,0,1,1],
  69.             [0,0,0,0,0,1,1],
  70.             [0,0,0,0,0,1,1],
  71.             [0,0,0,0,0,1,1],
  72.             [1,1,0,0,0,1,1],
  73.             [0,1,1,1,1,1,0]
  74.         ],//5
  75.         [
  76.             [0,0,0,0,1,1,0],
  77.             [0,0,1,1,0,0,0],
  78.             [0,1,1,0,0,0,0],
  79.             [1,1,0,0,0,0,0],
  80.             [1,1,0,1,1,1,0],
  81.             [1,1,0,0,0,1,1],
  82.             [1,1,0,0,0,1,1],
  83.             [1,1,0,0,0,1,1],
  84.             [1,1,0,0,0,1,1],
  85.             [0,1,1,1,1,1,0]
  86.         ],//6
  87.         [
  88.             [1,1,1,1,1,1,1],
  89.             [1,1,0,0,0,1,1],
  90.             [0,0,0,0,1,1,0],
  91.             [0,0,0,0,1,1,0],
  92.             [0,0,0,1,1,0,0],
  93.             [0,0,0,1,1,0,0],
  94.             [0,0,1,1,0,0,0],
  95.             [0,0,1,1,0,0,0],
  96.             [0,0,1,1,0,0,0],
  97.             [0,0,1,1,0,0,0]
  98.         ],//7
  99.         [
  100.             [0,1,1,1,1,1,0],
  101.             [1,1,0,0,0,1,1],
  102.             [1,1,0,0,0,1,1],
  103.             [1,1,0,0,0,1,1],
  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.             [1,1,0,0,0,1,1],
  109.             [0,1,1,1,1,1,0]
  110.         ],//8
  111.         [
  112.             [0,1,1,1,1,1,0],
  113.             [1,1,0,0,0,1,1],
  114.             [1,1,0,0,0,1,1],
  115.             [1,1,0,0,0,1,1],
  116.             [0,1,1,1,0,1,1],
  117.             [0,0,0,0,0,1,1],
  118.             [0,0,0,0,0,1,1],
  119.             [0,0,0,0,1,1,0],
  120.             [0,0,0,1,1,0,0],
  121.             [0,1,1,0,0,0,0]
  122.         ],//9
  123.         [
  124.             [0,0,0,0],
  125.             [0,0,0,0],
  126.             [0,1,1,0],
  127.             [0,1,1,0],
  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.         ]//:
  135.     ];

发布日期： 作者： 511遇见

所属分类： Css/Html5 标签： 　

没有相关文章!

相关文章: