【HTML5】炫丽的时钟效果Canvas绘图与动画基础练习
2015-03-17 14:59
651 查看
源自慕课网
效果如下：
全部代码：
效果如下：
全部代码：
<!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> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<style type="text/css">
html,body{height:100%}
</style>
<body>
<canvas id="canvas" style="height:100%">
当前浏览器不支持Canvas
</canvas>
</body>
</html>
<script type="text/javascript" src="digit.js"></script>
<script type="text/javascript" src="clockdown.js"></script>逻辑代码：clockdown.js
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(){
WINDOW_WIDTH=document.body.clientWidth;
WINDOW_HEIGHT=document.body.clientHeight;
MARGIN_LEFT=Math.round(WINDOW_WIDTH/10);
r=Math.round(WINDOW_WIDTH*4/5/108)-1;
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))*9,//结果为-10/10
vy:-10,
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(){
var count=0;
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.7;
}
if(balls[i].x+r>0&&balls[i].x-r<WINDOW_WIDTH){
balls[count++]=balls[i];}
}
//移除溢出的小球
while(balls.length>count){balls.pop();}
}
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();
console.log(balls.length);
}
//渲染每个数字
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();
}
}
}
}数字的结构定义：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-炫丽的时钟效果Canvas绘图与动画
- HTML5-炫丽的时钟效果Canvas绘图与动画
- canvas-炫丽的倒计时效果Canvas绘图与动画基础
- 炫丽的倒计时效果Canvas绘图与动画基础
- HTML5 canvas绘图制作打击视频玻璃破碎动画效果
- 倒计时效果Canvas绘图与动画基础
- HTML5之Canvas时钟(网页效果--每日一更)
- HTML5 Canvas动画效果实现原理
- html5之Canvas绘图工具基础介绍
- 7 款基于 HTML5 Canvas 的超炫 3D 动画效果
- HTML5 Canvas 练习(简单时钟)
- 7 款基于 HTML5 Canvas 的超炫 3D 动画效果
- 八大疯狂的HTML5 Canvas及WebGL动画效果——8 CRAZY ANIMATIONS WITH WEBGL AND HTML5 CANVAS【收藏】
- HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
- HTML5 Canvas动画效果实现原理
- HTML5 Canvas动画效果实现原理
- HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET
- HTML5 canvas 动画基础自学分享 2
- HTML5 Canvas初体验之绘图基础
- HTML5 Canvas动画效果演示