代码改变世界

用html5的canvas写了个书籍翻页效果

2012-01-21 02:17  onm  阅读(2280)  评论(1)  编辑  收藏  举报

之前在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.）

一些资料：