开发者社区> cometwo123> 正文

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>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
前端祖传三件套HTML的HTML5之新绘画元素 canvas
近年来,前端技术发展迅猛,各种新的技术层出不穷。其中之一便是HTML5绘画元素canvas。Canvas(画布)是HTML5新增加的一个绘图区域,它可以用JavaScript来进行操作和绘制图形。
23 0
HTML学习笔记(四) Canvas 下
HTML学习笔记(四) Canvas
9 0
HTML学习笔记(四) Canvas 上
HTML学习笔记(四) Canvas
15 0
基于HTML5 Canvas实现炫酷钟表效果
基于HTML5 Canvas实现炫酷钟表效果
22 0
JavaScript 基于HTML5 canvas 获取文本占用的像素宽度
JavaScript 基于HTML5 canvas 获取文本占用的像素宽度
23 0
如何在HTML5中使用Canvas实现雷达图?
如何在HTML5中使用Canvas实现雷达图?
20 0
HTML基础、canvas
介绍了html的一些基础和标签
36 0
HTML5 canvas 在线涂鸦
HTML5 canvas 在线涂鸦
57 0
HTML5的学习之canvas画布(五)
HTML5的学习之canvas画布 canvas其他剩余的方法和属性。 转换 方法 描述 scale() 缩放当前绘图至更大或更小。 rotate() 旋转当前绘图。 translate() 重新映射画布上的 (0,0) 位置。 transform() 替换绘图的当前转换矩阵。 setTransform() 将当前转换重置为单位矩阵。然后运行 transform()。 图像绘制 方法 描述 drawImage() 向画布上绘制图像、画布或视频。 createImageData() 创建新的、空白的 ImageData 对象。 getImageData() 返回 ImageData 对象,
35 0
HTML5的学习之canvas画布(四)
HTML5的学习之canvas画布 这篇博客继续学习canvas的文字相关属性和方法。 属性 属性 描述 font 设置或返回文本内容的当前字体属性。 textAlign 设置或返回文本内容的当前对齐方式。 textBaseline 设置或返回在绘制文本时使用的当前文本基线。 方法 方法 描述 fillText() 在画布上绘制"被填充的"文本。 strokeText() 在画布上绘制文本(无填充)。 measureText() 返回包含指定文本宽度的对象。 使用canvas绘制艺术字 HTML代码: <canvas id="my_canvas"&
77 0
+关注
cometwo123
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
天猫HTML5互动技术实践
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
相关实验场景
更多