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

Question

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

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

Answer 1

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

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

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

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

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

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

祝你的元素好运!