【HTML5】炫丽的时钟效果Canvas绘图与动画基础练习

时间:2021-04-17 11:02:13

源自慕课网

效果如下:

【HTML5】炫丽的时钟效果Canvas绘图与动画基础练习

全部代码:

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