首页 / 操作系统 / Linux / HTML5-炫丽的时钟效果Canvas绘图与动画基础练习
HTML5-炫丽的时钟效果Canvas绘图与动画基础练习效果如下：http://www.linuxidc.com/yanshi/2015/03/Canvas/index.html全部代码：
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5-炫丽的时钟效果Canvas绘图与动画 - Linux公社 www.linuxidc.com</title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</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 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>数字的结构定义：digit.js
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] ]//: ];--------------------------------------分割线 --------------------------------------HTML5 地理位置定位（HTML5 Geolocation）原理及应用 http://www.linuxidc.com/Linux/2012-07/65129.htmHTML5移动开发即学即用（双色） PDF+源码 http://www.linuxidc.com/Linux/2013-09/90351.htmHTML5入门学习笔记 http://www.linuxidc.com/Linux/2013-09/90089.htmHTML5移动Web开发笔记 http://www.linuxidc.com/Linux/2013-09/90088.htmHTML5 开发中的本地存储的安全风险 http://www.linuxidc.com/Linux/2013-06/86486.htm《HTML5与CSS3权威指南》及相配套源码 http://www.linuxidc.com/Linux/2013-02/79950.htm关于 HTML5 令人激动的 10 项预测 http://www.linuxidc.com/Linux/2013-02/79917.htmHTML5与CSS3实战指南 PDF http://www.linuxidc.com/Linux/2013-02/79910.htm--------------------------------------分割线 --------------------------------------本文永久更新链接地址：http://www.linuxidc.com/Linux/2015-03/115109.htm
易网时代-编程资源站