定时器无效，digit已经引用了
来源：4-1 一个实现动画的基础函数
C阳0
2016-05-12 22:53
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
canvas.width=800;
canvas.height=600;
setInterval(render,10);
//console.log(digit);
var r=6;
var timer;
//console.log(x);
var oTime=new Date(2016,4,14,0,0,0);
var nTime=new Date();
var h1=parseInt((oTime-nTime)/(1000*60*60*10)),
h2=parseInt((oTime-nTime)/(1000*60*60)%10);
var m1=parseInt((oTime-nTime)/(1000*60)%60/10),
m2=parseInt((oTime-nTime)/(1000*60)%60%10);
var s1=parseInt((oTime-nTime)/(1000)%60/10),
s2=parseInt((oTime-nTime)/(1000)%60%10);
function render(){
context.clearRect(0,0,800,600);
draw(0,0,h1,context);
draw(15*(r+1),0,h2,context);
draw(30*(r+1),0,10,context);
draw(39*(r+1),0,m1,context);
draw(54*(r+1),0,m1,context);
draw(69*(r+1),0,10,context);
draw(78*(r+1),0,s1,context);
draw(93*(r+1),0,s2,context);
}
//console.log(s1);
function draw(x,y,num,cxt){
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*(r+1)*2+r+1,y+i*(r+1)*2+r+1,r,0,2*Math.PI);
cxt.fillStyle="blue";
cxt.fill();}
}
}
}//draw
写回答
关注
1回答
-
- lemnaceae
- 2016-05-23 17:46:17
1、setInterval()使用的位置不对，应该放在你的h1，h2等算出来之后，不然你使用setInterval()时调用render()后调用draw()时，h1、h2等参数是属于未定义的，也就是num是未定义的，所以digit[num].length会报错；
2、你要确保var oTime=new Date(2016,4,14,0,0,0);中oTime的时间要在当前时间nTime之后，不然相减之后为负值，后面使用的时候索引越界，digit[num].length也会报错；
3、注意两个时间之间不要相差太大，最好不要超过100小时，不然小时的十位数显示时也会引起索引越界而报错。
炫丽的倒计时效果Canvas绘图与动画基础
学习HTML5中最激动人心的技术Canvas，彻底释放自己的创造力
96746 学习 · 1000 问题
相似问题