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 ...
随机推荐
- JAVA的文件创建
package com.xia; import java.io.*; public class test2 { public static void main(String[] args) { //输 ...
- [HDOJ3709]Balanced Number(数位dp)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3709 题意:求区间[L,R]内每一个数中是否存在一位,使得左边的各位数*距离=右边的各位数*距离(自己 ...
- Mybatis+struts2+spring整合
把student项目改造成ssm struts2 +mybatis+spring 1,先添加spring支持:类库三个,applicationContext.xml写在webinf下四个命名空间,监 ...
- ServiceStack.OrmLite 笔记4 删
删除 db.DeleteAll(); //各种姿势 db.Delete(p => p.Age == 27);// db.Delete(q => q.Where(p => p.Age ...
- ubuntu下卸载vmware
直接crl+alt+t打开一个terminal,然后输入sudo vmware-installer --uninstall-product vmware-workstation即可卸载!操作如下图: ...
- Linux命令工具 top详解
Linux命令工具 top详解 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器.top是一个动态显示过程,即可以通过用户按键来不 ...
- FLASH CC 2015 CANVAS 中 createjs 移除绑定事件
myBtn.addEventListener("click", function(evt) { // do stuff... evt.remove(); // removes th ...
- Python学习(2)基本语法
目录 交互式编程 脚本式编程 Python 标识符 Python保留字符 行和缩进 多行语句 Python 引号 Python注释 Python空行 python的输入和输出 命令行参数 交互式编程 ...
- JavaWeb学习总结(十)--JDBC之MySQL大数据
一.基本概念 大数据也称之为LOB(Large Objects),LOB又分为:clob和blob,clob用于存储大文本,blob用于存储二进制数据,例如图像.声音.二进制文等. 但是,在mysql ...
- js 的小效果---->选项卡
js选项卡 <!doctype html> <html> <head> <meta charset="utf-8"> <t ...