javascript - 在 Canvas 上绘制和动画书页

标签 javascript html css html5-canvas css-transitions

我正在尝试在 Canvas 内创建一个 div。 我想让 div 的行为像这张图片中的那样:http://i40.tinypic.com/10fxaxi.png . div 应该像图片中描述的那样从第 1 步过渡到第 5 步。

这就像在这个 Angular 、观点和视角上翻动一本书的一页。 有人可以帮我吗?它应该只是 Html5、css3 和任何 JS pr Jquery。 谢谢。

最佳答案

您可以使用 Canvas 上下文的转换进行翻页。

可以使用 context.scale(scaleX,scaleY) 进行缩放。

旋转可以通过 context.rotate(radianAngle) 完成。

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

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

试一试,如有疑问,请返回您的代码。

祝你的元素好运!

关于javascript - 在 Canvas 上绘制和动画书页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21002663/

相关文章:

html - 下拉菜单类别/子类别

html - 如何使 3 个 DIV 的中间拉伸(stretch)以垂直填充

javascript - 谷歌地图上的中心选项不起作用

javascript - 将 javascript 数组中的值发送到表单值 html,将 html 值中的值发送到 php

javascript - 由 Repl.it 处理的 Handle_additional_input

javascript - Django 引导日期时间选择器

javascript - 用JS改变header下的url

javascript - 如何添加/删除 div 颜色 onclick 而不是按钮?

jquery - 在父 LI 的水平中心 float 子导航 UL

php - 网站设计中的图像