HTML5 Canvas初試玩心得

前一陣子試玩了一下HTML5的Canvas，有一點心得。

基本上Canvas讓我感覺有點像flash的graphic加上matrix的配合畫出一張bitmapdata，Canvas的東西畫上去就是畫上去了，沒辦法只單獨針對裡面的某個物件進行控制，也就是說如果Canvas裡有個東西的座標或狀態改變的話，需要整張Canvas清空再重繪一次。
而且因為Canvas裡的東西是『畫上去的』，所以不像flash的display tree一樣可以給予裡面物件一些事件(ex:滑鼠事件)，因此如果需要跟user互動的話，可能需要隨時算出該物件理論上該存在的座標，然後在Canvas上面疊一個透明的dom上去充當按鈕感應區吧!? 不確定，不過這是我目前想到的solution。

如果沒有寫成類別的話，要純粹用Canvas來玩一些東西其實還挺累的哩…。




不過也只是比較累而已啦，Canvas搞懂了之後還算挺簡單的。

1.    Canvas所有進行繪製的動作都是透過Canvas. getContext('2d')這個物件來實作的，有點像是flash裡MovieClip.graphic一樣。

2.    Canvas裡的層級是由Canvas. getContext('2d'). globalCompositeOperation這個屬性來決定的，我使用的是『destination-over』，也就是說最先畫到Canvas上的東西層級會越高，因此如果想要層級顯示正確，就要依照正確的順序把所有東西依序畫到Canvas裡。各種不同globalCompositeOperation的特性可以google一下或是去這裡參考一下：https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html。

3.    善用Canvas. getContext('2d').save()及Canvas. getContext('2d').restore()，別被這兩個function的字面意思搞混了，翻成白話的意思其實可以解釋成『鎖定目前圖層』，尤其是接下來要畫進Canvas裡的東西需要旋轉或變形時，一定要先執行Canvas. getContext('2d').save()，將原本已經畫好的部份儲存起來，再進行變形的動作，這樣變形只會影響到接下來要繪製的物件身上，不會影響到整個已經畫好的Canvas，如果不執行Canvas. getContext('2d').save()，則整個Canvas都會一起被套用變形。畫完當下的物件後記得要再Canvas. getContext('2d').restore()以解除鎖定。這功能還是要自己實作試試看才可以比較理解箇中的傲妙。

我自己做了一個demo，網址在此：http://labs.medialand.com.tw/jason/html5/canvas1/
按下test鈕會另開視窗顯示當下的截圖。
所有的code我都直接寫在html上，有興趣的可以直接copy回去修改看看，就大概可以知道我上面三點所講的意思。