在画布上绘制和动画书页的动画

时间:2014-01-08 17:36:58

标签: javascript html5 css3 html5-canvas css-transitions

我正在尝试在画布中创建一个div。 我希望div在这张照片中表现得像:http://i40.tinypic.com/10fxaxi.png。 div应该从步骤1过渡到步骤5,就像在图像上描述的那样。

就像在这个角度,视角和视角上翻阅一本书的页面。 有人可以帮我吗?它应该只是Html5,css3和任何JS pr Jquery。 感谢。

1 个答案:

答案 0 :(得分:0)

您可以使用画布上下文的变换来翻页。

可以使用context.scale(scaleX,scaleY)完成缩放。

可以使用context.rotate(radianAngle)完成旋转。

Skewing没有专用的上下文命令,但可以使用context.transform(1,skewY,skewX,1,0,0)完成;

您还需要context.translate,它设置所有缩放,旋转和倾斜操作的原点:context.translate(X,Y)。

尝试一下,如果您有疑问,请回复您的代码。

祝你的项目好运!