用html5的canvas写了个书籍翻页效果
2012-01-21 02:17 onm 阅读(2255) 评论(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.)
一些资料:
- http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html
- https://developer.mozilla.org/cn/Canvas_tutorial
- http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40010542-CH1-SW1