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

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

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

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

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

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