Loading
0

HTML5 Canvas实现会跳舞的时间动画

功能

利用html5 canvas实现会跳舞的时间动画,如下图所示:

 

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Canvas实现会跳舞的时间动画</title>
<style>
.guang{color:#000;font-size:30px;text-align: center;margin:30px 0px;}
*{margin:0;padding:0;list-style:none;border:none;}
#zzsc{width:920px;margin:40px auto;}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div class="guang">时间动画</div>
<div id="zzsc"></div>
<div style="text-align:center;clear:both;margin-top:20px">
<script>
$(function(){
$('#zzsc').html('<canvas id="canvas"></canvas>');
var WINDOW_WIDTH = 920;
var WINDOW_HEIGHT = 400;
var RADIUS = 7; //球半径
var NUMBER_GAP = 10; //数字之间的间隙
var u=0.65; //碰撞能量损耗系数
var context; //Canvas绘制上下文
var balls = []; //存储彩色的小球
const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]; //彩色小球的颜色
var currentNums = []; //屏幕显示的8个字符
var 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]
]
];

function drawDatetime(cxt){
var nums = [];

context.fillStyle="#005eac";
var date = new Date();
var offsetX = 70, offsetY = 30;
var hours = date.getHours();
var num1 = Math.floor(hours/10);
var num2 = hours%10;
nums.push({num: num1});
nums.push({num: num2});
nums.push({num: 10});
var minutes = date.getMinutes();
var num1 = Math.floor(minutes/10);
var num2 = minutes%10;
nums.push({num: num1});
nums.push({num: num2});
nums.push({num: 10});
var seconds = date.getSeconds();
var num1 = Math.floor(seconds/10);
var num2 = seconds%10;
nums.push({num: num1});
nums.push({num: num2});

for(var x = 0;x<nums.length;x++){
nums[x].offsetX = offsetX;
offsetX = drawSingleNumber(offsetX,offsetY, nums[x].num,cxt);

if(x<nums.length-1){
if((nums[x].num!=10) &&(nums[x+1].num!=10)){
offsetX+=NUMBER_GAP;
}
}
}
if(currentNums.length ==0){
currentNums = nums;
}else{

for(var index = 0;index<currentNums.length;index++){
if(currentNums[index].num!=nums[index].num){

addBalls(nums[index]);
currentNums[index].num=nums[index].num;
}
}
}
renderBalls(cxt);
updateBalls();

return date;
}

function addBalls (item) {
var num = item.num;
var numMatrix = digit[num];
for(var y = 0;y<numMatrix.length;y++){
for(var x = 0;x<numMatrix[y].length;x++){
if(numMatrix[y][x]==1){
var ball={
offsetX:item.offsetX+RADIUS+RADIUS*2*x,
offsetY:30+RADIUS+RADIUS*2*y,
color:colors[Math.floor(Math.random()*colors.length)],
g:1.5+Math.random(),
vx:Math.pow(-1, Math.ceil(Math.random()*10))*4+Math.random(),
vy:-5
}
balls.push(ball);
}
}
}
}

function renderBalls(cxt){
for(var index = 0;index<balls.length;index++){
cxt.beginPath();
cxt.fillStyle=balls[index].color;
cxt.arc(balls[index].offsetX, balls[index].offsetY, RADIUS, 0, 2*Math.PI);
cxt.fill();
}
}

function updateBalls () {
var i =0;
for(var index = 0;index<balls.length;index++){
var ball = balls[index];
ball.offsetX += ball.vx;
ball.offsetY += ball.vy;
ball.vy+=ball.g;
if(ball.offsetY > (WINDOW_HEIGHT-RADIUS)){
ball.offsetY= WINDOW_HEIGHT-RADIUS;
ball.vy=-ball.vy*u;
}
if(ball.offsetX>RADIUS&&ball.offsetX<(WINDOW_WIDTH-RADIUS)){

balls[i]=balls[index];
i++;
}
}

for(;i<balls.length;i++){
balls.pop();
}
}
function drawSingleNumber(offsetX, offsetY, num, cxt){
var numMatrix = digit[num];
for(var y = 0;y<numMatrix.length;y++){
for(var x = 0;x<numMatrix[y].length;x++){
if(numMatrix[y][x]==1){
cxt.beginPath();
cxt.arc(offsetX+RADIUS+RADIUS*2*x,offsetY+RADIUS+RADIUS*2*y,RADIUS,0,2*Math.PI);
cxt.fill();
}
}
}
cxt.beginPath();
offsetX += numMatrix[0].length*RADIUS*2;
return offsetX;
}

var canvas = document.getElementById("canvas");
canvas.width=WINDOW_WIDTH;
canvas.height=WINDOW_HEIGHT;
context = canvas.getContext("2d");
var currentDate = new Date();

setInterval(function(){

context.clearRect(0, 0, context.canvas.width, context.canvas.height);
drawDatetime(context);
}, 50)
});
</script>
</div>
</body>
</html>
声明:本文为原创,作者为 刘国栋,转载时请保留本声明及附带文章链接:http://www.liuguodong.net/540.html

最后编辑于:2016/11/28作者: 刘国栋

刘国栋

刘国栋个人博客,是记录博主学习和成长的个人博客网站,关注于web前端和WordPress经验与技巧方面的学习和分享,也会分享一些优秀的个人博客模版。

2 条回应

发表评论

电子邮件地址不会被公开。 必填项已用*标注

arrow grin ! ? cool roll eek evil razz mrgreen smile oops lol mad twisted wink idea cry shock neutral sad ???

  1. 分钱榜说道:
    2#

    这个厉害了

  2. 1#

    不知道是哪个牛人写的,厉害啊

扫一扫关注刘国栋个人博客

扫一扫关注刘国栋个人博客