老师：我做了一个当前时间而不是倒计时的效果 结果小球跳动时与 时间变换 中间相差了一秒
来源：4-1 一个实现动画的基础函数
慕神8909898
2016-04-03 19:43
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/reset.css"/>
</head>
<body>
<canvas id="canvas" style="display:block;">
当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>
<script src="js/digit.js"></script>
<script>
var window_width=1366;
var window_height=643;
var radius=3.5;
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=window_width;
canvas.height=window_height;
curShowTimeSeconds=getCurrentShowTimeSeconds();
setInterval(function(){
render(context);
updata();
},50)
}
function getCurrentShowTimeSeconds() {
var curTime = new Date();
var ret = curTime.getTime();
ret = Math.round( ret/1000 )
return ret
}
function render(cxt){
cxt.clearRect(0,0,window_width,window_height);
var date=new Date();
// var hours = parseInt( curShowTimeSeconds / 3600);
// var minutes = parseInt( (curShowTimeSeconds - hours * 3600)/60 );
// var seconds = curShowTimeSeconds % 60;
var hours=date.getHours();
var minutes=date.getMinutes();
var seconds=date.getSeconds();
renderdigit(800,200,parseInt(hours/10),cxt);
renderdigit(800+15*(radius+1),200,parseInt(hours%10),cxt);
renderdigit(800+30*(radius+1),200,10,cxt);
renderdigit(800+39*(radius+1),200,parseInt(minutes/10),cxt);
renderdigit(800+54*(radius+1),200,parseInt(minutes%10),cxt);
renderdigit(800+69*(radius+1),200,10,cxt);
renderdigit(800+78*(radius+1),200,parseInt(seconds/10),cxt);
renderdigit(800+93*(radius+1),200,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();
}
}
function updata(){
var nextShowTimeSeconds = getCurrentShowTimeSeconds();
var nextHours = parseInt( nextShowTimeSeconds / 3600);
var nextMinutes = parseInt( (nextShowTimeSeconds - 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( 800 , 200 , parseInt(curHours/10) );
}
if( parseInt(curHours%10) != parseInt(nextHours%10) ){
addBalls( 800 + 15*(radius+1) , 200 , parseInt(curHours/10) );
}
if( parseInt(curMinutes/10) != parseInt(nextMinutes/10) ){
addBalls( 800 + 39*(radius+1) , 200 , parseInt(curMinutes/10) );
}
if( parseInt(curMinutes%10) != parseInt(nextMinutes%10) ){
addBalls( 800 + 54*(radius+1) , 200 , parseInt(curMinutes%10) );
}
if( parseInt(curSeconds/10) != parseInt(nextSeconds/10) ){
addBalls( 800 + 78*(radius+1) , 200 , parseInt(curSeconds/10) );
}
if( parseInt(curSeconds%10) != parseInt(nextSeconds%10) ){
addBalls( 800 + 93*(radius+1) , 200 , 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][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 )
}
}
</script>
</body>
</html>
写回答
关注
4回答
-
- ImME3815475
- 2016-09-14 18:35:25
同学，我也做的是这么一个时钟。我用了两个canvas重叠放置 底下的画时间 上面的画下落的小球 底下的画面1S刷新一次 上面的50ms刷新一次 但是我发现小球在来回跳 每个1S的时候它就回到了初始位置。 这是什么原因啊？？
-
- int30xcc
- 2016-04-05 02:25:46
本来跳的时间就是前一秒的时间啊，，表示前一秒已经破碎了。。掉地上了。。
-
- 慕神8909898
- 2016-04-03 19:52:12
我的球跳的时候 你细心看一下位置 就能发现啦 小球跳出来的位置 和当前时间是不一样的
-
- 慕慕9986984
- 2016-04-03 19:49:55
没有看出来问题呀！
炫丽的倒计时效果Canvas绘图与动画基础
学习HTML5中最激动人心的技术Canvas，彻底释放自己的创造力
96746 学习 · 1000 问题
相似问题