                        課程
                    
                        /前端開發
                        
                            /Html5
                        
                        /炫麗的倒計時效果Canvas繪圖與動畫基礎

老師：我做了一個當前時間而不是倒計時的效果結果小球跳動時與時間變換中間相差了一秒

<!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>