为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/Html5

/炫丽的倒计时效果Canvas绘图与动画基础

倒计时正常，浏览器没报错，小球效果出不来，为什么呀

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

];


慕粉4076523

2016-11-06

源自：炫丽的倒计时效果Canvas绘图与动画基础  4-3

关注问题 我要回答
1023
操作
收起

正在回答

4 回答

慕粉4076523 提问者
2016-11-27

哪里呀，而且怎么连倒计时都出不来了，一直说countDown.html:133 Uncaught TypeError: Cannot read property 'length' of undefined

0 回复 有任何疑惑可以回复我~
收起回答
qq___571
2016-11-24

分号写出逗号了

0 回复 有任何疑惑可以回复我~
收起回答
慕粉4076523 提问者
2016-11-07

没有，找不出哪里写错了

0 回复 有任何疑惑可以回复我~
收起回答
qq_没做完的梦继续睡_04234114
2016-11-07

我也遇到了这个问题,你的解决了么

0 回复 有任何疑惑可以回复我~
收起回答

举报

0/150
提交
取消
炫丽的倒计时效果Canvas绘图与动画基础
  • 参与学习       96746    人
  • 解答问题       1000    个

学习HTML5中最激动人心的技术Canvas，彻底释放自己的创造力

进入课程

本课相似问答

1 回答出不来效果 注释部分为小球特效 加了以后倒计时效果也出不来了

1 回答倒计时能显示，小球显示不出来

2 回答小球运行浏览器崩溃

2 回答我的倒计时没有出来

1 回答为什么小球滚落效果从倒数第二个数字变化开始，而不是从倒数第一个小球的变化开始有效果呢
搜索更多本课相关问答

倒计时正常，浏览器没报错，小球效果出不来，为什么呀

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信