2010年11月3日 星期三

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回去修改看看,就大概可以知道我上面三點所講的意思。

1 則留言:

  1. Canvas可以直接掛Events上去..

    之後再用Event的pageX和pageY扣掉offset之後得到座標值

    不過要記得canvas標籤一定要加上width和height

    不能用CSS指定,不然你畫上去的圖比例會跑掉XD

    回覆刪除