Canvas跳动彩球时间动画特效js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 Canvas跳动彩球时间动画特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Canvas跳动彩球时间动画特效</title>
<style>
*{margin:0;padding:0;list-style:none;border:none;}
#zzsc{width:920px;margin:100px auto;}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/zzsc.js"></script>
</head>
<body>
<div id="zzsc"></div>
</body>
</html>

JS代码(zzsc.js):

$(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 = [];
	//灞忓箷鏄剧ず鐨?涓瓧绗?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,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] ]//:];
	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(){
	//娓呯┖鏁翠釜Canvas锛岄噸鏂扮粯鍒跺唴瀹?context.clearRect(0,0,context.canvas.width,context.canvas.height);
	drawDatetime(context);
}
,50)}
);

附件:下载该文件资源,减少时间成本(增值服务)