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

時鐘效果和計時器效果自適應問題

時鐘效果和計時器效果下載下來在瀏覽器顯示的時候只顯示了一半，這個因為物理寬高的原因么？但是里面不是設置了自適應么？然后里面也有bug，所有小球都堆積在一起了。

煊_煊

2016-05-30

源自：炫麗的倒計時效果Canvas繪圖與動畫基礎 5-6

關注問題我要回答

1106

操作

收起

2 回答

qq_葛帥朋_0
2016-06-07

把html的height也設成100%就行了，這個在哪個全屏滾動的課程中講到過，也沒說具體原因

0 回復有任何疑惑可以回復我~

收起回答

慕少7431778
2016-06-03

var?WINDOW_WIDTH?=?1024;
var?WINDOW_HEIGHT?=?600;
var?RADIUS?=?8;
var?MARGIN_TOP?=?60;
var?MARGIN_LEFT?=?30;

const?endTime?=?new?Date(2016,5,5,18,47,52);
var?curShowTimeSeconds?=?0

var?balls?=?[];
const?colors?=?["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]

window.onload?=?function(){

????WINDOW_WIDTH?=?document.body.clientWidth;
????//WINDOW_HEIGHT?=?document.body.clientHeight;

????MARGIN_LEFT?=?Math.round(?WINDOW_WIDTH?/?10?);
????RADIUS?=?Math.round(?WINDOW_WIDTH?*?4?/?5?/?108?)?-?1;

????MARGIN_TOP?=?Math.round(?WINDOW_HEIGHT?/?5?);

????var?canvas?=?document.getElementById('canvas');
????var?context?=?canvas.getContext("2d");

????canvas.width?=?WINDOW_WIDTH;
????canvas.height?=?WINDOW_HEIGHT;

????curShowTimeSeconds?=?getCurrentShowTimeSeconds()
????setInterval(
????????function(){
????????????render(?context?);
????????????update();
????????}
????????,
????????50
????);
}

function?getCurrentShowTimeSeconds()?{
????var?curTime?=?new?Date();
????var?ret?=?endTime.getTime()?-?curTime.getTime();
????ret?=?Math.round(?ret/1000?)

????return?ret?>=?0???ret?:?0;
}

function?update(){

????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(?MARGIN_LEFT?+?0?,?MARGIN_TOP?,?parseInt(curHours/10)?);
????????}
????????if(?parseInt(curHours%10)?!=?parseInt(nextHours%10)?){
????????????addBalls(?MARGIN_LEFT?+?15*(RADIUS+1)?,?MARGIN_TOP?,?parseInt(curHours/10)?);
????????}

????????if(?parseInt(curMinutes/10)?!=?parseInt(nextMinutes/10)?){
????????????addBalls(?MARGIN_LEFT?+?39*(RADIUS+1)?,?MARGIN_TOP?,?parseInt(curMinutes/10)?);
????????}
????????if(?parseInt(curMinutes%10)?!=?parseInt(nextMinutes%10)?){
????????????addBalls(?MARGIN_LEFT?+?54*(RADIUS+1)?,?MARGIN_TOP?,?parseInt(curMinutes%10)?);
????????}

????????if(?parseInt(curSeconds/10)?!=?parseInt(nextSeconds/10)?){
????????????addBalls(?MARGIN_LEFT?+?78*(RADIUS+1)?,?MARGIN_TOP?,?parseInt(curSeconds/10)?);
????????}
????????if(?parseInt(curSeconds%10)?!=?parseInt(nextSeconds%10)?){
????????????addBalls(?MARGIN_LEFT?+?93*(RADIUS+1)?,?MARGIN_TOP?,?parseInt(nextSeconds%10)?);
????????}

????????curShowTimeSeconds?=?nextShowTimeSeconds;
????}

????updateBalls();

????console.log(?balls.length?)
}

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;
????????}
????}
????
????var?cnt?=?0;
????for(?var?i?=?0;?i?<?balls.length;?i?++)
	if(?balls[i].x?+?RADIUS?>?0?&&?balls[i].x?-?RADIUS?<?WINDOW_WIDTH?)
	????balls[cnt++]?=?balls[i]

????while(?balls.length?>?Math.min(300,cnt)?){
????balls.pop();
????}
}

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,WINDOW_WIDTH,?WINDOW_HEIGHT);

????var?hours?=?parseInt(?curShowTimeSeconds?/?3600);
????var?minutes?=?parseInt(?(curShowTimeSeconds?-?hours?*?3600)/60?)
????var?seconds?=?curShowTimeSeconds?%?60

????renderDigit(?MARGIN_LEFT?,?MARGIN_TOP?,?parseInt(hours/10)?,?cxt?)
????renderDigit(?MARGIN_LEFT?+?15*(RADIUS+1)?,?MARGIN_TOP?,?parseInt(hours%10)?,?cxt?)
????renderDigit(?MARGIN_LEFT?+?30*(RADIUS?+?1)?,?MARGIN_TOP?,?10?,?cxt?)
????renderDigit(?MARGIN_LEFT?+?39*(RADIUS+1)?,?MARGIN_TOP?,?parseInt(minutes/10)?,?cxt);
????renderDigit(?MARGIN_LEFT?+?54*(RADIUS+1)?,?MARGIN_TOP?,?parseInt(minutes%10)?,?cxt);
????renderDigit(?MARGIN_LEFT?+?69*(RADIUS+1)?,?MARGIN_TOP?,?10?,?cxt);
????renderDigit(?MARGIN_LEFT?+?78*(RADIUS+1)?,?MARGIN_TOP?,?parseInt(seconds/10)?,?cxt);
????renderDigit(?MARGIN_LEFT?+?93*(RADIUS+1)?,?MARGIN_TOP?,?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()
????????????}
}