javascrpt canvas

javascript 比較常用的一些函數。

Math.random(); 返回一個 [0,1) 的數。

需要延遲執行某個函數。 setTimeout("youfunction()",300);

setInterval(); 使用和 setTimeout() 差不多。javascript 的 prototype 還是很常用的。應該專門去學習一下。程序中主要用到的是 canvas 畫圖。或者更主要的是這個框架的結構。tmp = new createjs.Container();Container() 中可以裝一些小組件。比如 tmp = createjs.Shape();還有 graphics類中可以花 circle,rect. 也就是畫圖形。具體可以看 createjs 的API。裏面有詳細的說明。createjs.Bitmap();

這是我的一個 randomShuffle 算法。

// random shuffle a list;
function randomShuffle(lst){
     var tp,idx;
     for(var i = 1; i < lst.length; i++){
          idx = genRandom(lst.length-i);
	  tmp = lst[idx];
          lst[idx] = lst[lst.length-i];
          lst[lst.length-i] = tmp;
    }
 }

canvas 畫直線也是需要學習一下的。什麼 moveto, lineto 之類的，並且還要用到 setStroke 之類的API。

具體的不太清楚了，需要的話，去看下 createjs 的API 吧。

另一個主要的內容就是 canvas 做動畫了。根據我的理解，做動畫之前，首先要理解需要動起來的東西的屬性都有哪些，首先最基本的就是 x,y座標了，這個簡單，就是位置嗎。位置變了不就動起來了嗎。另外還有透明度。alpha。處理這個還有 rotation. 就是角度啊，角度的變換可以產生旋轉的效果，不就是動畫嗎？另外呢，還要清楚錨點這個概念了。這些東西是通過 regX 和 regY 來設置的，我來這樣解釋吧，首先，一個圖像移動的時候，我們可以講它抽象成一個點，這個點就是通過 regX 和 regY 來設置的呢，一般情況下，我們將這個點設置在圖形的中間，那麼可以這樣。 regX = pic.getBounds().width; regY = pic.getBounds().height; 這樣就搞定了，表現就是圖像中心的那個點的 x y 就代表了圖形的 x，y這樣你就可以確定圖形的位置了。

其實上面這些還是需要你慢慢理解一下的，位置這個概念還是很重要的，錨點，並且 x，y 都是相對於 parent 的座標系的，這個也是需要理解一下的。

好像 這個月也就學到了這些東西。其他的記起來再寫吧。