HTML5-炫丽的时钟效果Canvas绘图与动画

简介:
+关注继续查看

这里写图片描述

<!DOCTYPE html>


<html>

    <head>
        <meta charset="utf-8"/>
        <title>HTML5-炫丽的时钟效果Canvas绘图与动画  </title>

        <style type="text/css">
            .linux903,.linux902 {display:none!important;display:none}
        </style>

    </head>

    <body>
        <canvas id="canvas"></canvas>
    </body>

</html>
<script type="text/javascript" src="digit.js"></script>
<script type="text/javascript">
    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 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]

            ]//:

        ];
    var r=8;//圆半径

        window.onload=function(){

        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))*4,//结果为-4/4

                         vy:-5,

                         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(){

       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.6;

         }

         }

      }





        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();



        }

        //渲染每个数字

        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();

                }

            }

        }

        }
</script>
目录
相关文章
|
13天前
|
移动开发 前端开发 Shell
《HTML5 Canvas核心技术 图形、动画与游戏开发》 读书笔记
《HTML5 Canvas核心技术 图形、动画与游戏开发》 读书笔记
|
2月前
|
前端开发 数据可视化
漏刻有时数据可视化大屏常用排版HTML和CSS动画(1):旋转动画
漏刻有时数据可视化大屏常用排版HTML和CSS动画(1):旋转动画
40 0
|
5月前
|
XML JavaScript 前端开发
AndroidQ(10.0) 手机锁屏炫酷充电动画————html方案
AndroidQ(10.0) 手机锁屏炫酷充电动画————html方案
41 1
|
7月前
|
JavaScript 前端开发 容器
DOM(二)——动画,改变HTML,事件,节点,集合
JavaScript 动画是通过对元素样式进行渐进式变化编程完成的。 这种变化通过一个计数器来调用,当计数器间隔很小时,动画看上去就是连贯的
64 0
DOM(二)——动画,改变HTML,事件,节点,集合
|
移动开发 前端开发 JavaScript
HTML5标签canvas制作动画
HTML5标签canvas制作动画
HTML5标签canvas制作动画
|
数据采集 缓存 搜索推荐
HTML中的<meta/>标签还能这么玩???【居然能搞动画】
HTML中的<meta/>标签还能这么玩???【居然能搞动画】
|
JavaScript HTML5 移动开发
带你读《Three. js开发指南: 基于WebGL和HTML5在网页上渲染 3D图形和动画(原书第3版)》之三:学习使用Three.js中的光源
本书将介绍如何直在浏览器中创建漂亮的3D场景和动画,并且充分发挥WebGL和现代浏览器的潜能。首先介绍基本概念和基础组件,然后通过逐渐扩展示例代码逐步深讲解更多高级技术。在本书中读者将学到如何从外部加载3D模型和具有真实效果的材质纹理、学习使用Three.js提供的摄像机组件来实现在3D场景中飞行和走动、如何将HTML5视频和画布作为材质贴在3D模型表面。此外还将学习变形动画和骨骼动画,甚至还会涉及在场景中使用物理模拟的方法,例如重力、碰撞检测等等。
|
JavaScript HTML5 移动开发
带你读《Three. js开发指南: 基于WebGL和HTML5在网页上渲染 3D图形和动画(原书第3版)》之二:构建Three.js应用的基本组件
本书将介绍如何直在浏览器中创建漂亮的3D场景和动画,并且充分发挥WebGL和现代浏览器的潜能。首先介绍基本概念和基础组件,然后通过逐渐扩展示例代码逐步深讲解更多高级技术。在本书中读者将学到如何从外部加载3D模型和具有真实效果的材质纹理、学习使用Three.js提供的摄像机组件来实现在3D场景中飞行和走动、如何将HTML5视频和画布作为材质贴在3D模型表面。此外还将学习变形动画和骨骼动画,甚至还会涉及在场景中使用物理模拟的方法,例如重力、碰撞检测等等。
|
JavaScript 前端开发 Web App开发
带你读《Three. js开发指南: 基于WebGL和HTML5在网页上渲染 3D图形和动画(原书第3版)》之一:使用Three.js创建你的第一个三维场景
本书将介绍如何直在浏览器中创建漂亮的3D场景和动画,并且充分发挥WebGL和现代浏览器的潜能。首先介绍基本概念和基础组件,然后通过逐渐扩展示例代码逐步深讲解更多高级技术。在本书中读者将学到如何从外部加载3D模型和具有真实效果的材质纹理、学习使用Three.js提供的摄像机组件来实现在3D场景中飞行和走动、如何将HTML5视频和画布作为材质贴在3D模型表面。此外还将学习变形动画和骨骼动画,甚至还会涉及在场景中使用物理模拟的方法,例如重力、碰撞检测等等。
|
HTML5 移动开发 Web App开发
使用 HTML5 视频代替 GIF 动画,提升性能体验
GIF 动画能在网上流行起来是有道理的。 它们能带来比普通图片更高的参与度,同时与典型视频相比更容易消化。
2455 0
相关产品
云迁移中心
推荐文章
更多