当前位置： 正文

html5 Canvas绘图与动画效果实例

02-22 HTML5/移动WEB应用/小程序 3836

Canvas顾名思义是定义在浏览器上画布，但Canvas不仅仅是一个元素，它更是一套编程的接口，它的出现已然超过了Web基于文档的设计初衷。利用它你可以开发出很多梦寐以求的内容，让编程工作者彻底释放自己的创造力！

效果预览：
http://www.linuxidc.com/yanshi/2015/03/Canvas/index.html
Html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>
<style type="text/css">
    html,body{height:100%}
</style>
 <body>
  <canvas id="canvas" style="height:100%">
  当前浏览器不支持Canvas
  </canvas>
 </body>
</html>
<script type="text/javascript" src="digit.js"></script>
<script type="text/javascript" src="clockdown.js"></script>

逻辑代码：clockdown.js

var WINDOW_WIDTH=1024;
var WINDOW_HEIGHT=600;
var MARGIN_TOP=60;
var MARGIN_LEFT=30;
//存放彩色小球
var balls=[];
 
const colors=["#33B5E5","#0099CC","#AA66CC","#669900","#FFBB33","#FF8800","#FF4444","CC0000"];
var r=8;//圆半径
    window.onload=function(){
    WINDOW_WIDTH=document.body.clientWidth;
WINDOW_HEIGHT=document.body.clientHeight;
MARGIN_LEFT=Math.round(WINDOW_WIDTH/10);
r=Math.round(WINDOW_WIDTH*4/5/108)-1;
    var canvas=document.getElementById("canvas");
    var context=canvas.getContext("2d");
    canvas.width=WINDOW_WIDTH;
    canvas.height=WINDOW_HEIGHT;
 
    window.setInterval(function(){
       var curr=new Date();
       var curHours=curr.getHours();
       var curMinutes=curr.getMinutes();
       var curSeconds=curr.getSeconds();
 
       //当时间的秒数改变时添加彩色小球
       if(preSeconds!=curSeconds)
       {
 
        if(parseInt(curHours/10)!=parseInt(preHours/10)){
        addBall(MARGIN_LEFT,MARGIN_TOP,parseInt(curHours/10));     
        }
          if(parseInt(curHours%10)!=parseInt(preHours%10)){
        addBall(MARGIN_LEFT+15*(r+1),MARGIN_TOP,parseInt(curHours%10));    
        }
         if(parseInt(curMinutes/10)!=parseInt(preMinutes/10)){
        addBall(MARGIN_LEFT+39*(r+1),MARGIN_TOP,parseInt(curMinutes/10));      
        }
          if(parseInt(curMinutes%10)!=parseInt(preMinutes%10)){
        addBall(MARGIN_LEFT+54*(r+1),MARGIN_TOP,parseInt(curMinutes%10));      
        }
 
         if(parseInt(curSeconds/10)!=parseInt(preSeconds/10)){
        addBall(MARGIN_LEFT+78*(r+1),MARGIN_TOP,parseInt(curSeconds/10));      
        }
          if(parseInt(curSeconds%10)!=parseInt(preSeconds%10)){
        addBall(MARGIN_LEFT+93*(r+1),MARGIN_TOP,parseInt(curSeconds%10));      
        }      
       }
       render(context);
 
        },50);
 
    }
 
    //添加小球(数字num上的彩色小球，x，y:数字方块容器的左上角顶点坐标)
    function addBall(x,y,num){
         for (var i=0;i<digit[num].length ;i++ )
         {
             for (var j=0;j<digit[num][i].length ;j++ )
             {
                 if(digit[num][i][j]==1){
 
                     var ball={
                     x:x+j*2*(r+1)+r+1,
                     y:y+i*2*(r+1)+r+1,                    
                     g:1.5+Math.random(),
                     vx:Math.pow(-1,Math.ceil(Math.random()*1000))*9,//结果为-10/10
                     vy:-10,
                     color:colors[Math.floor(Math.random()*colors.length)]
                     };
                     balls.push(ball);
 
                 }
             }
         }
    }
  //----画彩色小球
  function renderBalls(context){
            //context.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT)
     for (var i=0;i<balls.length ;i++ )
     {
        context.beginPath();
        context.arc(balls[i].x,balls[i].y,r,0,2*Math.PI,false);
        context.fillStyle=balls[i].color;
        context.fill();
        context.closePath();
     }
  }
 
 //----更新彩色小球位置
  function UpdateBalls(){
      var count=0;
   for (var i=0;i<balls.length ;i++ )
     {
     balls[i].x+=balls[i].vx;
     balls[i].y+=balls[i].vy;
     balls[i].vy+=balls[i].g;
     if(balls[i].y+r>=WINDOW_HEIGHT){
     balls[i].y=WINDOW_HEIGHT-r;
     balls[i].vy=-balls[i].vy*0.7;  
     }
 
     if(balls[i].x+r>0&&balls[i].x-r<WINDOW_WIDTH){
     balls[count++]=balls[i];}
 
     }
     //移除溢出的小球
     while(balls.length>count){balls.pop();}
  }
 
 
    var preHours;
    var preMinutes;
    var preSeconds;
 
    //渲染整个画布
    function render(context)
    {
        context.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT)
        var now=new Date();
        var hours=now.getHours();
        var minutes=now.getMinutes();
        var seconds=now.getSeconds();
        preHours=hours;
        preMinutes=minutes;
        preSeconds=seconds;
        //---时
        renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),context);
        renderDigit(MARGIN_LEFT+15*(r+1),MARGIN_TOP,hours%10,context);
        renderDigit(MARGIN_LEFT+30*(r+1),MARGIN_TOP,10,context);
        //---分
        renderDigit(MARGIN_LEFT+39*(r+1),MARGIN_TOP,parseInt(minutes/10),context);
        renderDigit(MARGIN_LEFT+54*(r+1),MARGIN_TOP,minutes%10,context);
        renderDigit(MARGIN_LEFT+69*(r+1),MARGIN_TOP,10,context);
        //---秒
        renderDigit(MARGIN_LEFT+78*(r+1),MARGIN_TOP,parseInt(seconds/10),context);
        renderDigit(MARGIN_LEFT+93*(r+1),MARGIN_TOP,seconds%10,context);
        //---画小球
        renderBalls(context);
        //---改变小球路径
        UpdateBalls();
 
        console.log(balls.length);
 
    }
    //渲染每个数字
    function renderDigit(x,y,num,context)
    {
    context.fillStyle="green";
    for (var i=0;i<digit[num].length ; i++)
    {
        for (var j=0;j<digit[num][i].length ;j++ )
        {
            if(digit[num][i][j]==1){
            context.beginPath();
            context.arc(x+j*2*(r+1)+r+1,y+i*2*(r+1)+r+1,r,0,2*Math.PI,false);
            context.closePath();
            context.fill();
            }
        }
    }
    }

数字的结构定义：digit.js

digit =
    [
        [
            [0,0,1,1,1,0,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,0,1,1,0],
            [0,0,1,1,1,0,0]
        ],//0
        [
            [0,0,0,1,1,0,0],
            [0,1,1,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [1,1,1,1,1,1,1]
        ],//1
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,1,1],
            [1,1,1,1,1,1,1]
        ],//2
        [
            [1,1,1,1,1,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//3
        [
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,0],
            [0,0,1,1,1,1,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,1,1,0],
            [1,1,1,1,1,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,1]
        ],//4
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,1,1,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//5
        [
            [0,0,0,0,1,1,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//6
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0]
        ],//7
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//8
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,1,1,0,0,0,0]
        ],//9
        [
            [0,0,0,0],
            [0,0,0,0],
            [0,1,1,0],
            [0,1,1,0],
            [0,0,0,0],
            [0,0,0,0],
            [0,1,1,0],
            [0,1,1,0],
            [0,0,0,0],
            [0,0,0,0]
        ]//:
    ];
微信公众号
手机浏览(小程序)
0
分享到：

猜你喜欢

软件用例工具概述 – 软件工程教程
HTML5/移动WEB应用/小程序

03-20 130
React Native设置元素样式 – React Native实战教程
HTML5/移动WEB应用/小程序

03-20 124
React Native状态state介绍和用法 – React Native实战教程
HTML5/移动WEB应用/小程序

03-20 114
软件维护概述 – 软件工程教程
HTML5/移动WEB应用/小程序

03-20 132
React Native ScrollView元素 – React Native实战教程
HTML5/移动WEB应用/小程序

03-20 128
redux核心概念和数据流 – Redux教程
HTML5/移动WEB应用/小程序

03-20 124
没有账号？ 忘记密码？