倒计时正常，浏览器没报错，小球效果出不来，为什么呀
来源：4-3 华丽的小球滚动效果
慕粉4076523
2016-11-06 16:21
<!DOCTYPE html>
<html>
<head>
<title>tiral1</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid black;margin-top: 60px;margin-left: 30px"></canvas>
<script src="digit.js"></script>
<script>
var windowwidth=1200;
var windowheight=768;
var radius=8;
var endTime=new Date(2016,10,8,18,47,52);
var curShowTimeSeconds=0;
var balls=[];
const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]
window.onload=function(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
canvas.width=windowwidth;
canvas.height=windowheight;
curShowTimeSeconds=getCurrentTime();
setInterval(
function(){
render(context);
update();
}
,50
);
}
function getCurrentTime(){
var curTime=new Date();
var ret=endTime.getTime()-curTime.getTime();
ret=Math.round(ret/1000);
return ret>=0? ret:0;
}
function update(){
var nextShowTimeSeconds=getCurrentTime();
var nexthours=parseInt(nextShowTimeSeconds/3600);
var nextminutes=parseInt((nextShowTimeSeconds-hours*3600)/60);
var nextseconds=parseInt(nextShowTimeSeconds%60);
var hours=parseInt(curShowTimeSeconds/3600);
var minutes=parseInt((curShowTimeSeconds-hours*3600)/60);
var seconds=parseInt(curShowTimeSeconds%60);
if(nextseconds!=seconds){
if(parseInt(hours/10)!=parseInt(nexthours/10)){
addBalls(50,100,parseInt(hours/10));
}
if(parseInt(hours%10)!=parseInt(nexthours%10)){
addBalls(194,100,parseInt(hours%10));
}
if(parseInt(minutes/10)!=parseInt(minutes/10)){
addBalls(338+90,100,parseInt(minutes/10));
}
if(parseInt(minutes%10)!=parseInt(minutes%10)){
addBalls(338+234,100,parseInt(minutes%10));
}
if(parseInt(seconds/10)!=parseInt(seconds/10)){
addBalls(338+468,100,parseInt(seconds/10));
}
if(parseInt(seconds%10)!=parseInt(seconds%10)){
addBalls(338+612,100,parseInt(seconds%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>=windowheight-radius){
balls[i].y=windowheight-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][i].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,windowwidth,windowheight);
var hours=parseInt(curShowTimeSeconds/3600);
var minutes=parseInt((curShowTimeSeconds-hours*3600)/60);
var seconds=parseInt(curShowTimeSeconds%60);
renderDigit(50,100,parseInt(hours/10),cxt);
renderDigit(194,100,parseInt(hours%10),cxt);
renderDigit(338,100,parseInt(10),cxt);
renderDigit(338+90,100,parseInt(minutes/10),cxt);
renderDigit(338+234,100,parseInt(minutes%10),cxt);
renderDigit(338+378,100,parseInt(10),cxt);
renderDigit(338+468,100,parseInt(seconds/10),cxt);
renderDigit(338+612,100,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,true);
cxt.closePath();
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();
cxt.fill();
}
}
</script>
</body>
</html>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] ]//: ];
写回答
关注
4回答
-
- 慕粉4076523
- 2016-11-27 17:14:52
哪里呀，而且怎么连倒计时都出不来了，一直说countDown.html:133 Uncaught TypeError: Cannot read property 'length' of undefined
-
- qq___571
- 2016-11-24 20:29:42
分号写出逗号了
-
- 慕粉4076523
- 2016-11-07 23:20:19
没有，找不出哪里写错了
-
- qq_没做完的梦继续睡_04234114
- 2016-11-07 21:09:16
我也遇到了这个问题,你的解决了么
炫丽的倒计时效果Canvas绘图与动画基础
学习HTML5中最激动人心的技术Canvas，彻底释放自己的创造力
96746 学习 · 1000 问题
相似问题