产品解决方案文档与社区免费试用定价云市场合作伙伴支持与服务了解阿里云
备案控制台登录/注册
开发者社区 开发与运维 文章 正文

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

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

这里写图片描述

<!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 canvas
HTML动画
HTML绘图
HTML Canvas绘图
HTML时钟
cometwo123
目录
相关文章
敲敲敲敲爆你脑袋
|
13天前
|
移动开发 前端开发 Shell
《HTML5 Canvas核心技术 图形、动画与游戏开发》 读书笔记
《HTML5 Canvas核心技术 图形、动画与游戏开发》 读书笔记
敲敲敲敲爆你脑袋
46 1
漏刻有时
|
2月前
|
前端开发 数据可视化
漏刻有时数据可视化大屏常用排版HTML和CSS动画(1)：旋转动画
漏刻有时数据可视化大屏常用排版HTML和CSS动画(1)：旋转动画
漏刻有时
40 0
cczhengv
|
5月前
|
XML JavaScript 前端开发
AndroidQ(10.0) 手机锁屏炫酷充电动画————html方案
AndroidQ(10.0) 手机锁屏炫酷充电动画————html方案
cczhengv
41 1
糖^O^
|
7月前
|
JavaScript 前端开发 容器
DOM(二)——动画，改变HTML，事件，节点，集合
JavaScript 动画是通过对元素样式进行渐进式变化编程完成的。 这种变化通过一个计数器来调用，当计数器间隔很小时，动画看上去就是连贯的
糖^O^
64 0
DOM(二)——动画，改变HTML，事件，节点，集合
游客27r7zphg3jgwe
|
移动开发 前端开发 JavaScript
HTML5标签canvas制作动画
HTML5标签canvas制作动画
游客27r7zphg3jgwe
89 0
HTML5标签canvas制作动画
1091207401930833
|
数据采集 缓存 搜索推荐
HTML中的<meta/>标签还能这么玩？？？【居然能搞动画】
HTML中的<meta/>标签还能这么玩？？？【居然能搞动画】
1091207401930833
133 0
温柔的养猫人
|
JavaScript HTML5 移动开发
带你读《Three. js开发指南： 基于WebGL和HTML5在网页上渲染 3D图形和动画（原书第3版）》之三：学习使用Three.js中的光源
本书将介绍如何直在浏览器中创建漂亮的3D场景和动画，并且充分发挥WebGL和现代浏览器的潜能。首先介绍基本概念和基础组件，然后通过逐渐扩展示例代码逐步深讲解更多高级技术。在本书中读者将学到如何从外部加载3D模型和具有真实效果的材质纹理、学习使用Three.js提供的摄像机组件来实现在3D场景中飞行和走动、如何将HTML5视频和画布作为材质贴在3D模型表面。此外还将学习变形动画和骨骼动画，甚至还会涉及在场景中使用物理模拟的方法，例如重力、碰撞检测等等。
温柔的养猫人
2410 0
温柔的养猫人
|
JavaScript HTML5 移动开发
带你读《Three. js开发指南： 基于WebGL和HTML5在网页上渲染 3D图形和动画（原书第3版）》之二：构建Three.js应用的基本组件
本书将介绍如何直在浏览器中创建漂亮的3D场景和动画，并且充分发挥WebGL和现代浏览器的潜能。首先介绍基本概念和基础组件，然后通过逐渐扩展示例代码逐步深讲解更多高级技术。在本书中读者将学到如何从外部加载3D模型和具有真实效果的材质纹理、学习使用Three.js提供的摄像机组件来实现在3D场景中飞行和走动、如何将HTML5视频和画布作为材质贴在3D模型表面。此外还将学习变形动画和骨骼动画，甚至还会涉及在场景中使用物理模拟的方法，例如重力、碰撞检测等等。
温柔的养猫人
2913 0
温柔的养猫人
|
JavaScript 前端开发 Web App开发
带你读《Three. js开发指南： 基于WebGL和HTML5在网页上渲染 3D图形和动画（原书第3版）》之一：使用Three.js创建你的第一个三维场景
本书将介绍如何直在浏览器中创建漂亮的3D场景和动画，并且充分发挥WebGL和现代浏览器的潜能。首先介绍基本概念和基础组件，然后通过逐渐扩展示例代码逐步深讲解更多高级技术。在本书中读者将学到如何从外部加载3D模型和具有真实效果的材质纹理、学习使用Three.js提供的摄像机组件来实现在3D场景中飞行和走动、如何将HTML5视频和画布作为材质贴在3D模型表面。此外还将学习变形动画和骨骼动画，甚至还会涉及在场景中使用物理模拟的方法，例如重力、碰撞检测等等。
温柔的养猫人
5053 0
初商
|
HTML5 移动开发 Web App开发
使用 HTML5 视频代替 GIF 动画，提升性能体验
GIF 动画能在网上流行起来是有道理的。 它们能带来比普通图片更高的参与度，同时与典型视频相比更容易消化。
初商
2455 0
热门文章
最新文章
1
web前端基础知识——HTML/HTML5
2
《HTML5 Canvas核心技术 图形、动画与游戏开发》 读书笔记
3
HTML——标签，属性，语法总结
4
HTML常用表单写一个百度搜索和注册页面
5
前端 JavaScript 与 HTML 怎么实现交互
6
Html 3D旋转相册制作
7
在spring_boot项目中如何将vue组件引入到.html页面进行使用
8
网络结构与HTML学习笔记
9
前端——HTML或者JSP页面--执行完某事件后刷新页面，重置表单，清空数据
10
html+css+js图片加载失败设置默认图片
1
Html入门练习
8
2
基于html5拖拽api实现列表的拖拽排序
10
3
七、使用BeautifulSoup4解析HTML实战（一）
12
4
html和css进阶小练习
11
5
html和css进阶
19
6
HTML和css入门作业
14
7
html使用vue模板、html引入vue.js-测试demo
13
8
Html5和Webpack3：Webpack5的常见用法
16
9
Html5和Webpack2：Webpack5打包JS和样式表
18
10
html字体标红效果demo示例（整理）
15
相关产品
云迁移中心
文档详情 产品详情
相关课程
更多
HTML5 新特性教程 零基础学前端HTML+CSS HTML基础入门学习 HTML 入门与实战
相关电子书
更多
天猫 HTML5 互动技术实践 天猫HTML5互动技术实践 《零基础HTML入门教程》
相关实验场景
更多
Html5和Webpack1：Webpack5打包工具介绍 Html5和Webpack2：Webpack5打包JS和样式表 Html5和Webpack3：Webpack5的常见用法 HTML5实现手风琴相册 快速掌握HTML5基础用法 HTML入门
推荐文章
更多
重磅来袭！参与评测赢Iphone14 pro！ 文件存储NAS评测征集令！ 招募！寻找技术人的伯乐！ 乘风者计划邀您入驻社区，精彩权益即刻享
下一篇
阿里云 X 森马 AIGC T恤设计大赛开启! 穿什么由你定，赢Airpods，作品定制联名T恤