HTML5自学笔记[ 19 ]canvas绘图实例之炫彩时钟

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title>炫彩时钟</title>

     <style>
         body{ background:#000;}
         canvas{ background:#fff; }
     </style>

     <script src="countdown.js"></script>
     <script src="digit.js"></script>
 </head>
 <body>
     <canvas id="canvas1"></canvas>
 </body>
 </html>

 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,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]
         ],
         [
             [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]
         ],
         [
             [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]
         ],
         [
             [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]
         ],
         [
             [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]
         ],
         [
             [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]
         ],
         [
             [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]
         ],
         [
             [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]
         ],
         [
             [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]
         ],
         [
             [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]
         ]//:
     ];

 /**
  * Created by dell on 2016/1/29.
  */
 window.onload = function(){
     var CVS_WIDTH = document.body.clientWidth * 4/5;
     var CVS_HEIGHT = document.body.clientHeight * 4/5;
     var MARGIN_LEFT = document.body.clientWidth * 1/10;
     var MARGIN_TOP = document.body.clientHeight * 1/10;
     var RADIUS = (CVS_WIDTH*4/5)/108 - 1;
     var PADDINGLEFT = (CVS_WIDTH - 108*(RADIUS+1))/2;
     var color = '#00688B';//数字颜色
     var curShowTime = getCurShowTime();//当前剩余时间
     var colors = ['#FF3030','#7CCD7C','#0000EE','#EE9A49','#EEEE00','#FF00FF','#96CDCD','#D15FEE','#EEAEEE','#EEDC82'];//彩球颜色集合
     var balls = [];

     var oCvs = document.getElementById('canvas1');
     var oCxt = oCvs.getContext('2d');

     //设置画布大小
     oCvs.width = CVS_WIDTH;
     oCvs.height = CVS_HEIGHT;
     oCvs.style.marginLeft = MARGIN_LEFT + 'px';
     oCvs.style.marginTop = MARGIN_TOP + 'px';

     setInterval(function () {
         render(oCxt);
         update();
     },50);

 function update(){
     var nextShowTime = getCurShowTime();

     var nextHour = parseInt(nextShowTime/3600);
     var nextMin = parseInt((nextShowTime - nextHour*3600)/60);
     var nextSec = parseInt(nextShowTime%60);

     var curHour = parseInt(curShowTime/3600);
     var curMin = parseInt((curShowTime - curHour*3600)/60);
     var curSec = parseInt(curShowTime%60);

     if(nextSec != curSec){
         curShowTime = nextShowTime;

         if(parseInt(nextHour/10) != parseInt(curHour/10)){
             addBalls(PADDINGLEFT,MARGIN_TOP,parseInt(nextSec/10));
         }
         if(parseInt(nextHour%10) != parseInt(curHour%10)){
             addBalls(PADDINGLEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(nextSec%10));
         }
         if(parseInt(nextMin/10) != parseInt(curMin/10)){
             addBalls(PADDINGLEFT+40*(RADIUS+1),MARGIN_TOP,parseInt(nextSec/10));
         }
         if(parseInt(nextMin%10) != parseInt(curMin%10)){
             addBalls(PADDINGLEFT+55*(RADIUS+1),MARGIN_TOP,parseInt(nextSec%10));
         }
         if(parseInt(nextSec/10) != parseInt(curSec/10)){
             addBalls(PADDINGLEFT+79*(RADIUS+1),MARGIN_TOP,parseInt(nextSec/10));
         }
         if(parseInt(nextSec%10) != parseInt(curSec%10)){
             addBalls(PADDINGLEFT+94*(RADIUS+1),MARGIN_TOP,parseInt(nextSec%10));
         }
         //console.info(balls)
     }
     updateBalls();
     //console.info(balls.length)
 }

 function updateBalls(){
     for(var i=0;i<balls.length;i++) {
         balls[i].x += balls[i].xv;
         balls[i].y += balls[i].yv;
         balls[i].yv += balls[i].g;

         if(balls[i].y >= CVS_HEIGHT-RADIUS){
             balls[i].y = CVS_HEIGHT - RADIUS;
             balls[i].yv = -balls[i].yv*0.75;
         }
     }
     var num = 0;
     for(var j=0;j<balls.length;j++){
         if(balls[j].x+RADIUS>0 && balls[j].x-RADIUS<CVS_WIDTH){
             balls[num++] = balls[j];
         }
     }

     balls = balls.slice(0,Math.min(500,num));

 }

 function addBalls(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*(RADIUS+1)+(RADIUS+1),
                     y:y+i*2*(RADIUS+1)+(RADIUS+1),
                     color:colors[Math.floor(Math.random()*colors.length)],
                     g:1.5+Math.random(),
                     xv:Math.pow(-1,Math.ceil(Math.random()*1000))*4,
                     yv:-10
                 };
                 balls.push(ball);
             }
         }
     }
 }

 function getCurShowTime(){
     var date = new Date();
     var ret = date.getHours()*3600 + date.getMinutes()*60 + date.getSeconds();

     return ret;

 }

 function render(cxt){
     var hour = parseInt(curShowTime/3600);
     var min = parseInt((curShowTime - hour*3600)/60);
     var sec = parseInt(curShowTime%60);

     cxt.clearRect(0,0,CVS_WIDTH,CVS_HEIGHT);
     renderDigit(cxt,PADDINGLEFT,MARGIN_TOP,parseInt(hour/10));
     renderDigit(cxt,PADDINGLEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hour%10));
     renderDigit(cxt,PADDINGLEFT+31*(RADIUS+1),MARGIN_TOP,10);
     renderDigit(cxt,PADDINGLEFT+40*(RADIUS+1),MARGIN_TOP,parseInt(min/10));
     renderDigit(cxt,PADDINGLEFT+55*(RADIUS+1),MARGIN_TOP,parseInt(min%10));
     renderDigit(cxt,PADDINGLEFT+70*(RADIUS+1),MARGIN_TOP,10);
     renderDigit(cxt,PADDINGLEFT+79*(RADIUS+1),MARGIN_TOP,parseInt(sec/10));
     renderDigit(cxt,PADDINGLEFT+94*(RADIUS+1),MARGIN_TOP,parseInt(sec%10));

     for(var i=0;i<balls.length;i++){
         cxt.fillStyle = balls[i].color;
         cxt.beginPath();
         cxt.arc(balls[i].x,balls[i].y,RADIUS,0,2*Math.PI);
         cxt.closePath();
         cxt.fill();
     }
 }

 function renderDigit(cxt,x,y,num){
     cxt.fillStyle = color;
     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){
                 cxt.beginPath();
                 cxt.arc(x+j*2*(RADIUS+1)+(RADIUS+1),y+i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI);
                 cxt.closePath();
                 cxt.fill();
             }
         }
     }

 }

 }

实例出处：慕课网http://www.imooc.com/，喜欢的朋友可以到慕课网搜索学习哦~

HTML5自学笔记[ 19 ]canvas绘图实例之炫彩时钟的更多相关文章

HTML5自学笔记[ 15 ]canvas绘图实例之钟表
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
HTML5自学笔记[ 21 ]canvas绘图实例之马赛克
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
HTML5自学笔记[ 20 ]canvas绘图实例之绘制倒影
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
HTML5自学笔记[ 13 ]canvas绘图小实例之方块移动
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
HTML5自学笔记[ 12 ]canvas绘图小示例之鼠标画线
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
HTML5自学笔记[ 11 ]canvas绘图基础1
html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支 ...
HTML5自学笔记[ 24 ]canvas绘图之星空草地
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
HTML5自学笔记[ 17 ]canvas绘图基础4
绘制图像: drawImage(oImg,x,y),oImg是一个Image对象,(x,y)为绘制起点,绘制的图像大小和源图大小一样. drawImage(oImg,x,y,w,h),后两个参数设置绘 ...
HTML5自学笔记[ 16 ]canvas绘图基础3
canvas还提供提供了一些动态方法,使图像可以旋转.缩放和移动,与css3中的方法一样. 移动:translate(x,y),x和y为横竖方向的偏移量旋转:rotate(弧度),弧度=角度*Mat ...

随机推荐

CENTOS 6&period;5 平台离线安装 Apache2&period;4
一.下载Apache 2.4 http://httpd.apache.org/download.cgi http://mirrors.cnnic.cn/apache//httpd/httpd-2.4. ...
Linux运行等级，根目录，文件类型etc
Linux的Runlevel Linux默认有6个Terminal(Ctrl+Alt+F1~F6)和1个X window(Ctrl+Alt+F7,图形化界面)让用户登录 Linux的runlevel一 ...
[CLR via C&num;]8&period; 方法
一.实例构造器和类(引用类型) 类实例构造器是允许将类型的实例初始化为良好状态的一种特殊的方法. 类实例构造器方法在"方法定义元数据表"中始终叫.ctor(代表constructo ...
我常用的delphi 第三方控件
转载:http://www.cnblogs.com/xalion/archive/2012/01/09/2317246.html 有网友问我常用的控件及功能.我先大概整理一下,以后会在文章里面碰到时再 ...
Javascript配合jQuery实现流畅的前端验证
做前端时一般都习惯用JavaScript进行表单的简单验证比如非空验证和正则表达式验证,这样过滤后的数据提交到服务端再由专门的控制器做数据处理,这样能减轻服务器的负担,下面看一下前端验证的简单步骤: ...
QML嵌入到QWidget中方法
简介嵌入方法有两种一种是直接拖控件,另一种是cpp代码动态生成, 控件方式动态代码生成 QQuickWidget *m_quickWidget=new QQuickWidget(); QUrl s ...
ASP&period;NET MVC 第三回 Controller与View
这节我们让ASP.NET MVC真正的跑起来一.新建Controller 首先我们自己新建一个新的Controller在Controllers上点右键,添加,Controller选项之后出现一 ...
Python安装coverage&period;py
coverage.py是一个用来统计python程序代码覆盖率的工具.它使用起来非常简单,并且支持最终生成界面友好的html报告.在最新版本中,还提供了分支覆盖的功能. 官方网站: http://ne ...
windows安装设备的驱动程序软件遇…
问题描述: 有时候我们在使用一些设备的时候需要获取电脑的驱动.安装方式一共有三种: 第一种是让系统自动更新和安装. 第二种是打开"资源管理器"选择指定文件夹路径更新. 第三种是使用 ...
轴对称 Navier-Stokes 方程组的一个点态正则性准则
对轴对称 NSE, 我们改进了 [Pan, Xinghong. A regularity condition of 3d axisymmetric Navier-Stokes equations. A ...