上一節中，我們留下了乙個flyin的方法沒有介紹，這裡想單獨寫一篇html5的動畫實現。
在第二節中我們實現了畫乙個泡泡，並且成功的擦除了泡泡，但當時也說了別把棋盤的線給擦掉了，所以做了偏移量。所以說html5 canvas還是低階， 沒有圖層的概念，擦掉再想補回來，怎麼補？ 答案就是重繪。 沒錯，整個canvas重繪，這樣就能不用擔心補**了。雖然帶來了效能的損失，但絕對減少的編碼難度。而且計算機的能力也不差這點損失。那麼重繪的話，我們在canvas是上所有的需要繪製的物件都應該有draw方法。這是必須的。另外，所有的元素都有個上下的概念，所以要先繪製下面的，再繪製上面的。 而這個上下就得靠 子元素的概念，這樣在父元素繪製完畢後遍歷其子元素繪製，就不用擔心掩蓋的問題。
如果想把ready區的3個泡「飛入」棋盤，就需要讓canvas在泡移動的時候進行重繪，泡泡不動時不需要重繪。泡泡的移動很容易實現，只要改變他的x,y座標即可。如果想達到動畫的效果，就得在改變座標期間，定時重繪，可以使用setinterval來實現。
另外，我們不光飛入的動作需要重繪，遊戲開始後玩家還要點選移動乙個泡泡到另外乙個格仔，所以這裡也要重繪。那繪製的資訊這麼多，整個重繪工作都要交給game來進行，game控制所有的父元素。
start: function () ,game.start就是初始化所有的父元素，over: function () ,
draw: function () ,
play: function (action, interval) , interval || 1);
},stop: function () ,
game.over自然不必說，只是這裡沒有寫具體**，結束時應該無法繼續操作泡泡。
game.draw 繪製所有的父元素
game.play 就是重繪方法，需要重繪時掉用此方法。接收2個引數，第乙個是重繪時需要做的動作，interval是繪製的間隔時間。不同的動作可能間隔不一樣。
可能這種實現是野路子，真正的重繪應該是遊戲開始後就不聽的呼叫重繪方法，而不是具體**呼叫，只是在具體的精靈（每個元素）update自己狀態就像我這裡的action。 這裡我們暫且這樣實現，後面如果達不到需求再重構這個重繪的**，畢竟核心的**不變，只是改改機制 不是大問題。
game.stop 停止重繪，又呼叫了一次draw，是為了保證最後的繪製沒問題。
接下來考慮下flyin飛入的實現。知道起始和結束的xy座標，飛入的路徑不是問題，無非是x y的加加減減，那麼動畫方面，我們的game.play的action就是來加減ready.bubbles的xy座標。飛入的邏輯並非這麼簡單，首先需要3個沒染色空格，如果不足3個，那就gameover了，所以map需要提供乙個返回3個空格子的方法，另外，飛入之後ready區要重新生成新的泡泡，而這幾個被飛的泡泡需要刪除，並且map要對3個空格子進行染色。 這就完成了整個飛入效果。
其實還有乙個邏輯就是 飛入完畢後檢查是否有哪些泡泡可以被消除，這個我們後面再講。
先看獲取3個空格的方法：
getemptybubbles: function ()獲取3個隨機的空格還是挺多**的。。。然後就是flyin的實現了。});});
if (empties.length <= 3)
var result = ;
var useds = ;
for (var i = 0; i < empties.length; i++)
var isused = false;
var ra = game.getrandom(empties.length);
for (var m = 0; m < useds.length; m++)
if (!isused)
}console.log(useds);
return result;
},
首先定乙個乙個status，來存飛入的狀態。3個都飛完畢才能做後面的邏輯。bubble物件也為此增加了px和py倆個成員（即bubble的實際座標），這樣才能控制每個畫素的移動。 其實在計算飛入路徑時我寫了很久的**，別看現在就這麼幾行，開發過程中還是頗費力。各種詭異的飛行。。。開始是按x++ y++遞增飛行的，這樣就是45°角飛行，但顯然飛行線路（起始到結束的線）的傾斜度不是45°，那就會出現先飛完x或y，再走直線，很傻的。所以要用斜率來計算當前的y座標。而x的座標可以固定常熟移動。我畫了乙個斜率的公式，忘記的同學可以看看下。根據長寬的比率，就能計算當前的y值。
}既然我們已經實現了動畫效果，那麼接下來順便再實現乙個動畫效果，就是點選泡泡時，泡泡要做出響應（就是忽閃忽閃的），要不然使用者都不知道點了沒有。所以bubble也要增加乙個閃動的action。
**的意思是讓間隔50毫秒，重繪一次光照的亮度，亮度值（外圓的半徑）10和30之間來迴盪。這樣就亮了暗，暗了再亮。很有意思：）
bubble.prototype.play = function ()if (!isup)
if (me.light == 30)
if (me.light == 10)
}, 50);
};bubble.prototype.stop = function ()
else
}, 50);
};
play: function (name, action, interval) , interval || 1);},stop: function (name) ,
HTML5 Canvas 教程 五 形狀
若要用html5畫布繪製自定義形狀，可以建立乙個路徑，然後呼叫closepath 方法關閉它。可以使用lineto arcto quadraticcurveto 或beziercurveto 方法來構造構形狀的每個子路徑。id mycanvas width 578 height 200 以上 演示了...
HTML5 canvas 繪製圓形
canvas繪製圓形的思路 1 建立路徑 beginpath 2 建立圓形的路徑 3 關閉路徑 closepath 路徑不關閉也能繪製出圖形 4 設定繪製樣式。建立圓形路徑時需要用到物件的arc方法，方法定義如 arc x,y,radius,startangle,endangle,countercl...
HTML5 canvas擦除無效
部分安卓手機上會出現canvas內圖表重疊，並且清除無效，屬於偶現缺陷，非常難以確定其產生原因，比如下圖這個樣子，第一次繪製的圖形沒有擦除，導致第二次繪製時出現重影 初步考慮為裝置自身問題，引起canvasapi的context.clearrect執行無效。在經過一些嘗試之後，發現在每次擦除 cle...