之前在Android上寫了個(gè)書籍翻頁效果，主要也是用到里面的canvas進(jìn)行繪圖和變換，昨天想玩下html5里的canvas，然后把這個(gè)效果移植過來了一下。
2d畫圖那套東西，好像大體上都差不太多，也就是顏色，字體，繪制圖形，圖片，文字，組合，變型，裁剪等這些東西，主要是canvas這個(gè)類，它是畫板，詳情可以參看文后的幾個(gè)鏈接，這里說下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)這個(gè)重要的東西，被設(shè)計(jì)這一個(gè)棧，可以說是狀態(tài)棧，通過 save()，restore()還進(jìn)行狀態(tài)保存恢復(fù)，這很重要，也很好用，保存狀態(tài)后，你可以玩命折騰，然后一個(gè)restore()又恢復(fù)了之前的狀態(tài)，從新開始。
移植過程中碰到很多api上的細(xì)節(jié)不同，糾結(jié)掉不少時(shí)間，而且自己js水平很水，寫的很白。文本的折行分頁處理沒搞，主要是個(gè)demo，遺憾的是一些動(dòng)畫效果和細(xì)節(jié)沒有實(shí)現(xiàn)，細(xì)節(jié)部分是自己的懶惰問題，加之昨天寫到小指很痛。動(dòng)畫效果是由于最開始我沒有了解canvas的動(dòng)畫機(jī)制，然后就開始上手寫代碼，最后寫出來到實(shí)現(xiàn)動(dòng)畫的時(shí)候，發(fā)現(xiàn)和Android動(dòng)畫機(jī)制很不一樣，我嘗試了一下，暫時(shí)沒想到什么解決方案，于是作罷。也許這些問題稍候會完善一下。
canvas實(shí)現(xiàn)的書籍翻頁效果地址：http://www.qhm123.com/static/pages/pager.html（源碼右鍵查看）
修正：右下角翻頁背面效果已修正。注意幾點(diǎn)：context.rotate(angel)這個(gè)參數(shù)是弧度，不是角度；rotate沒有提供以某一固定點(diǎn)旋轉(zhuǎn)接口，默認(rèn)是以點(diǎn)(0,0)作旋轉(zhuǎn)的；變換是逆序的（The transformations must be performed in reverse order.）