AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

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

这里写图片描述

<!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>
文章标签：
前端开发
JavaScript
容器
关键词：
HTML动画
HTML canvas动画
HTML canvas
HTML时钟
HTML Canvas绘图
cometwo123
目录
相关文章
疯狂的猿
|
3月前
可爱狗狗的404动画HTML源码
可爱狗狗的404动画HTML源码
疯狂的猿
192 17
疯狂的猿
|
3月前
创意滑板动画404错误提示HTML源码
创意滑板动画404错误提示页面HTML源码
疯狂的猿
157 0
创意滑板动画404错误提示HTML源码
疯狂的猿
|
3月前
html5+svg太空人404动画模板源码
html5+svg太空人404动画模板源码
疯狂的猿
59 17
疯狂的猿
|
3月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
疯狂的猿
84 34
疯狂的猿
|
3月前
|
移动开发 前端开发 HTML5
Html5 Canvas绘制圆形仪表盘动画源码
Html5 Canvas绘制圆形仪表盘动画特效是一款基于HTML5 Canvas绘制的圆形百分比仪表盘动画特效。
疯狂的猿
33 1
疯狂的猿
|
3月前
|
JavaScript
jQuery实现的卡片式翻转时钟HTML源码
jQuery实现的卡片式翻转时钟HTML源码
疯狂的猿
30 0
jQuery实现的卡片式翻转时钟HTML源码
疯狂的猿
|
3月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
疯狂的猿
127 33
疯狂的猿
|
3月前
|
移动开发 HTML5
HTML5 SVG实现可爱的小鸟卡通动画3D特效
HTML5 SVG实现可爱的小鸟卡通动画
疯狂的猿
88 29
疯狂的猿
|
3月前
html实现的文字发散动画效果代码
html实现的文字发散动画效果代码
疯狂的猿
84 30
疯狂的猿
|
3月前
|
移动开发 前端开发 HTML5
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画代码
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画特效代码，很有意思，一团三角形碎片跟随鼠标的移动，不冗长、不笨重，反而有一种很轻盈的感觉，非常不错
疯狂的猿
75 29

热门文章

最新文章

  • 1
    HTML5最新经典俄罗斯方块游戏插件
  • 2
    前端基础的讲解-html(3)
  • 3
    简约404错误页面HTML源码
  • 4
    前端基础的讲解-html(1)
  • 5
    前端基础的讲解-html(2)
  • 6
    Webview+Python：用HTML打造跨平台桌面应用的创新方案
  • 7
    设计模式（C++版）
  • 8
    灵骏可预期网络：Built for AI Infrastructure
  • 9
    如何保证分布式文件系统的数据一致性
  • 10
    HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局（上）
  • 1
    PHP将HTML标签转化为图片
    331
  • 2
    基于 HTML5 和 Canvas 开发的在线图片编辑器
    175
  • 3
    阿里云云效产品使用合集之代码域如何管理上传的PHP和HTML代码
    232
  • 4
    使用 XPath 定位 HTML 中的 img 标签
    117
  • 5
    2024较火的软件宣传单页HTML源码
    188
  • 6
    Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易，而且功能比纯文本更强。
    332
  • 7
    Sphinx是一个Python文档生成工具，它可以解析reStructuredText或Markdown格式的源代码注释，并生成多种输出格式，如HTML、LaTeX、PDF、ePub等。
    284
  • 8
    【vue】vue 里面使用 v-html 插入的文本带有换行符‘\n‘不换行
    790
  • 9
    提升Selenium在Chrome上的HTML5视频捕获效果的五个方法
    347
  • 10
    动态粒子发射404网站HTML源码
    101

    • 相关课程

    更多
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS

    • 相关电子书

    更多
  • 《零基础HTML入门教程》
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • HTML及前端框架
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
    • 下一篇
    阿里云oss简介和使用流程