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 ...
随机推荐
- 摩托罗拉SE4500 三星 S3C6410 Wince6.0平台软解码调试记录以及驱动相关问题解释
虽然S3C6410出来很多年了,甚至于已经停产了,出货的几乎都有依赖于库存,SE4500也出来很多年了,但是网上依旧不会有调试资料帮助你,一切源于自私.希望本文能帮到你,不必感谢.本文来自C.S.D. ...
- 注册dll失败
注册DLL的时候一出现错误: win8下: (右键弹出) 如果再不行, 64位系统下,把DLL移动到C:\Windows\SysWOW64下 更改路径
- jquery ajax请求时，设置请求头信息
设置一个名为 headers 的参数 参考代码: // attempt to make an XMLHttpRequest to indeed.com // jQuery 1.6.1 and Chro ...
- 关于两个php.ini的说明
关于两个php.ini的说明 Apache 和 php下各有一个php,ini文件 D:\wamp\bin\apache\apache2.4.9\bin\php.ini用于web访问时的配置文 ...
- Change An Item Property Using Set_Item_Property In Oracle Forms
Set_Item_Property is used to change an object's settings at run time. Note that in some cases you ca ...
- 随机内容生成（random模块）
摘抄于: 低调的python小子 当梦想照进现实 幸福近在咫尺 [jpg]http://ip.ipwind.cn/msn.png[/jpg] Python中的random模块用于生成随机数.下面介绍 ...
- HDU 5422 Rikka with Graph
Rikka with Graph Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) ...
- iOS - OC Copy 拷贝
前言 copy:需要先实现 NSCopying 协议,创建的是不可变副本. mutableCopy:需要实现 NSMutableCopying 协议,创建的是可变副本. 浅拷贝:指针拷贝,源对象和副本 ...
- SAP接口编程 之 JCo3.0系列(01)：JCoDestination
SAP接口编程 之 JCo3.0系列(01):JCoDestination 字数2101 阅读103 评论0 喜欢0 JCo3.0是Java语言与ABAP语言双向通讯的中间件.与之前1.0/2.0相比 ...
- Windows_cmd_命令
1. netstat -ano 查看端口占用情况 netstat -anp // 命令来查看一下,Linux系统是否在监听 3306 这个端口号 2.