绚丽倒计时canvas动画粒子技术问题

为什么这样子不对呢？  <script src="js/digit.js"></script> 是下载老师的  视频连接地址http://www.imooc.com/video/2457


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf8">
		<title>asdasd</title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid #aaa;display: block;margin:50px auto;">当前浏览器不支持HTML5</canvas>
		<script src="js/digit.js"></script>
		<script src="js/countdown.js"></script>
	</body>
</html>

var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var RADIUS = 8;
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30;

const endTime = new Date("2016/6/7,18:55:10");
var   curShowTimeSeconds = 0

var balls = [];
const colors = ["#33B5E5","#0099CC","#AA66cc","#9933CC","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]



window.onload = function(){
	var canvas = document.getElementById('canvas');
	var context= canvas.getContext('2d');
	
	canvas.width = WINDOW_WIDTH;
	canvas.height= WINDOW_HEIGHT;
	
	curShowTimeSeconds = getCurrentShowTimeSeconds();
	setInterval(
		function(){
			render( context );
			update();
		}
		,
		50
	);
	
}



function getCurrentShowTimeSeconds(){
	var curTime = new Date();
	var ret = endTime.getTime() - curTime.getTime();
	ret = Math.round(ret / 1000)
	return ret >= 0 ? ret : 0;
}


function update(){
	var nextShowTimeSeconds = getCurrentShowTimeSeconds();
	
	var nextHours = parseInt(curShowTimeSeconds / 3600);
	var nextMinutes= parseInt( (curShowTimeSeconds - nextHours*3600 ) / 60);
	var nextSeconds = nextShowTimeSeconds % 60;
	
	var curHours = parseInt(curShowTimeSeconds / 3600);
	var curMinutes= parseInt( (curShowTimeSeconds - curHours*3600 ) / 60);
	var curSeconds = curShowTimeSeconds % 60;
	
	if(nextSeconds != curSeconds){
		if( parseInt(curHours/10) != parseInt(nextHours/10)){
			addBalls(MARGIN_LEFT + 0,MARGIN_TOP,parseInt(curHours/10))
		}
		if( parseInt(curHours%10) != parseInt(nextHours%10)){
			addBalls(MARGIN_LEFT + 15*(RADIUS+1),MARGIN_TOP,parseInt(curHours/10))
		}
		
		if( parseInt(curMinutes/10) != parseInt(nextHours/10)){
			addBalls(MARGIN_LEFT + 39*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes/10))
		}
		if( parseInt(curMinutes%10) != parseInt(nextHours%10)){
			addBalls(MARGIN_LEFT + 54*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes%10))
		}
		
		
		if( parseInt(curSeconds/10) != parseInt(curSeconds/10)){
			addBalls(MARGIN_LEFT + 78*(RADIUS+1),MARGIN_TOP,parseInt(curHours/10))
		}
		if( parseInt(curSeconds%10) != parseInt(nextHours%10)){
			addBalls(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(nextSeconds%10))
		}
		
		curShowTimeSeconds = nextShowTimeSeconds;
	}
	
	updateBalls();
}
	
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 >= WINDOW_HEIGHT-RADIUS){
		balls[i].y = WINDOW_HEIGHT-RADIUS;
		balls[i].vy = - balls[i].vy*0.75;
	}
}

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



function render(cxt){
	
	cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);
	
	var hours = parseInt(curShowTimeSeconds / 3600);
	var minutes= parseInt( (curShowTimeSeconds - hours*3600 ) / 60);
	var seconds = curShowTimeSeconds % 60;
	renderDigit(MARGIN_TOP,MARGIN_LEFT,parseInt(hours/10),cxt);
	renderDigit(MARGIN_LEFT+18*(RADIUS+1),MARGIN_TOP-30,parseInt(hours%10),cxt);
	renderDigit(MARGIN_LEFT+31*(RADIUS+1),MARGIN_TOP-30,10,cxt);
	renderDigit(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP-30,parseInt(minutes/10),cxt);
	renderDigit(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP-30,parseInt(minutes%10),cxt);
	renderDigit(MARGIN_LEFT+69*(RADIUS+1),MARGIN_TOP-30,10,cxt);
	renderDigit(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP-30,parseInt(seconds/10),cxt);
	renderDigit(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP-30,parseInt(seconds%10),cxt);
	
	for(var i=0;i<balls.length;i++){
		cxt.fillStyle = balls[i].color;
		cxt.beginPath()
		cxt.arc(balls[i].x,balls[i].y,RADIUS, 0 , 2*Math.PI,ture)
		cxt.colosePath()
		cxt.fill()
	}
}

function renderDigit(x,y,num,cxt){
	
	cxt.fillStyle = "rgb(0,102,153)";
	
	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){
				cxt.beginPath();
				cxt.arc( x+j*2*(RADIUS+1)+(RADIUS+1) , y+i*2*(RADIUS+1)+(RADIUS+1) , RADIUS,0,2*Math.PI);
				cxt.closePath() //fengbi
				cxt.fill()
			}
		}
	}
}

姚嘉鑫

浏览 1621回答 1