當(dāng)把時(shí)間設(shè)置為20ms的時(shí)候會(huì)越來(lái)越快很可怕,但是50ms又不會(huì)了,是不是遍歷那個(gè)數(shù)組的時(shí)間已經(jīng)超過(guò)了20ms
2017-12-15
貌似用setTimeout比較好,
var test = function () {
setTimeout(function () {
test ()
}, 1000)
}
test ()
好像setInterval每次都會(huì)重新定義一個(gè)計(jì)時(shí)器,比較耗資源
var test = function () {
setTimeout(function () {
test ()
}, 1000)
}
test ()
好像setInterval每次都會(huì)重新定義一個(gè)計(jì)時(shí)器,比較耗資源
2017-12-14
這個(gè)程序還有一點(diǎn)小小的bug,如果你將網(wǎng)頁(yè)最小化或者切換到別的標(biāo)簽頁(yè)時(shí),再切換回來(lái)會(huì)出現(xiàn)離開(kāi)這段時(shí)間內(nèi)的小球同時(shí)出現(xiàn)。我的解決辦法就是使用windows.onfocus(網(wǎng)頁(yè)獲得焦點(diǎn))和windows.onblur(網(wǎng)頁(yè)失去焦點(diǎn)),兩個(gè)函數(shù)來(lái)監(jiān)聽(tīng)事件,當(dāng)網(wǎng)頁(yè)獲得焦點(diǎn)時(shí)直接刷新頁(yè)面就解決了,但個(gè)人認(rèn)為能將動(dòng)畫中斷最好,繼續(xù)學(xué)習(xí)相關(guān)知識(shí)之后回來(lái)在修改把,還有就是當(dāng)頁(yè)面大小改變時(shí)并不能像靜態(tài)網(wǎng)頁(yè)一樣實(shí)時(shí)刷新效果,所以我用windows.onresize監(jiān)聽(tīng)出現(xiàn)頁(yè)面變化之后刷新網(wǎng)頁(yè)。
2017-12-11
按照老師做的,超出最大值時(shí)刪除的小球是新生成的而不是即將要離開(kāi)屏幕的小球。為了不會(huì)造成在數(shù)字炸裂時(shí)只生成一兩個(gè)小球的尷尬情況,我修改成了以下代碼:
var MAX_BALLS = 300;
while (balls.length > cnt) {
balls.pop();
}
if (cnt > MAX_BALLS) {
var temp = [];
for (var i = cnt - MAX_BALLS; i < cnt; i++) {
temp.push(balls[i]);
}
balls = temp;
}
var MAX_BALLS = 300;
while (balls.length > cnt) {
balls.pop();
}
if (cnt > MAX_BALLS) {
var temp = [];
for (var i = cnt - MAX_BALLS; i < cnt; i++) {
temp.push(balls[i]);
}
balls = temp;
}
2017-12-01
跟著做完了 有需要的同學(xué)可以看下 參照評(píng)論給的回答 修改了一下 實(shí)現(xiàn)失焦一段時(shí)間不會(huì)導(dǎo)致小球堆在一起。沒(méi)有修改的可以試著把窗口縮下來(lái)一段時(shí)間就會(huì)發(fā)現(xiàn)這個(gè)問(wèn)題。
這是 github 修改的代碼在readme里 有興趣可以看看
https://github.com/luomaochen/colorball-timeclock
這是 github 修改的代碼在readme里 有興趣可以看看
https://github.com/luomaochen/colorball-timeclock
2017-11-21
發(fā)現(xiàn)就算用來(lái)Math.min(300,cnt)也無(wú)濟(jì)于事,把頁(yè)面刷新一下,馬上縮減頁(yè)面,過(guò)一會(huì)后打開(kāi)還是會(huì)有堆積,只不過(guò)堆積的小球數(shù)不會(huì)超過(guò)300個(gè)而已;在畫布內(nèi)的小球數(shù)快要達(dá)到300時(shí),會(huì)減少小球繪制數(shù)量,比如balls.length==298 那么新繪制的小球數(shù)則為2,按照你們的效果來(lái)說(shuō)就是,新彈出來(lái)的小球只有兩個(gè)。
2017-11-16
最后一個(gè)案例,不是填充之后不是colsePath會(huì)幫你自動(dòng)閉合路徑,而是因?yàn)槔蠋熯@里填充的顏色與邊框相同,且邊框的寬度較小,所以看起來(lái)和自動(dòng)閉合沒(méi)有區(qū)別。鋸齒的出現(xiàn)是因?yàn)檫吙驅(qū)挾容^大而造成的,因?yàn)樘畛漕伾珪r(shí)并不會(huì)填充到邊框,導(dǎo)致首位有一部分邊框‘出頭’了。