<!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;">
????????當(dāng)前瀏覽器不支持Canvas，請(qǐng)更換瀏覽器后再試
?</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>
2016-09-14
同學(xué)，我也做的是這么一個(gè)時(shí)鐘。我用了兩個(gè)canvas重疊放置 ?底下的畫(huà)時(shí)間 上面的畫(huà)下落的小球 底下的畫(huà)面1S刷新一次 ?上面的50ms刷新一次 但是我發(fā)現(xiàn)小球在來(lái)回跳 ?每個(gè)1S的時(shí)候它就回到了初始位置。 ?這是什么原因??？？
2016-04-05
本來(lái)跳的時(shí)間就是前一秒的時(shí)間啊，，表示前一秒已經(jīng)破碎了。。掉地上了。。
2016-04-03
我的球跳的時(shí)候 ?你細(xì)心看一下位置 ?就能發(fā)現(xiàn)啦 ?小球跳出來(lái)的位置 和當(dāng)前時(shí)間是不一樣的 ?
2016-04-03
沒(méi)有看出來(lái)問(wèn)題呀！