之前在Android上寫了個書籍翻頁效果，主要也是用到里面的canvas進行繪圖和變換，昨天想玩下html5里的canvas，然后把這個效果移植過來了一下。

2d畫圖那套東西，好像大體上都差不太多，也就是顏色，字體，繪制圖形，圖片，文字，組合，變型，裁剪等這些東西，主要是canvas這個類，它是畫板，詳情可以參看文后的幾個鏈接，這里說下html5的canvas和Android中的canvas的區別。

html5的canvas這里幾乎把所有接口都集中在了canvas的context上，要先獲取canvas的context，然后操作 context進行幾乎一切操作。所有畫筆輪廓字體的設定都是全局的，而不像Android中是通過相應的筆刷和設定通過傳參進去的，canvas本身不維護這些屬性。對于組合變換這些屬性兩者是都有維護的，canvas都有狀態這個重要的東西，被設計這一個棧，可以說是狀態棧，通過 save()，restore()還進行狀態保存恢復，這很重要，也很好用，保存狀態后，你可以玩命折騰，然后一個restore()又恢復了之前的狀態，從新開始。

移植過程中碰到很多api上的細節不同，糾結掉不少時間，而且自己js水平很水，寫的很白。文本的折行分頁處理沒搞，主要是個demo，遺憾的是一些動畫效果和細節沒有實現，細節部分是自己的懶惰問題，加之昨天寫到小指很痛。動畫效果是由于最開始我沒有了解canvas的動畫機制，然后就開始上手寫代碼，最后寫出來到實現動畫的時候，發現和Android動畫機制很不一樣，我嘗試了一下，暫時沒想到什么解決方案，于是作罷。也許這些問題稍候會完善一下。

canvas實現的書籍翻頁效果地址：http://www.qhm123.com/static/pages/pager.html（源碼右鍵查看）

修正：右下角翻頁背面效果已修正。注意幾點：context.rotate(angel)這個參數是弧度，不是角度；rotate沒有提供以某一固定點旋轉接口，默認是以點(0,0)作旋轉的；變換是逆序的（The transformations must be performed in reverse order.）