为什么在html5中使用canvas作为动画？

Question

我是html5的新手并且一直在玩画布。我想知道画布何时真的有必要/有用吗？即什么时候用它？

如果我需要做简单的动画，比如移动标签，我真的需要画布，还是更好/更容易使用jquery / js？

Answer 1

借助画布，您可以创建2D图形应用程序，动画，图像的简单转换（如旋转它们），GUI等。例如：

1. Asteroids game
2. jigsaw puzzle
3. 关于GUI，遗憾的是我无法加载网站，不知道为什么......它被称为iWidgets.com，我发现的唯一一个是screenshot。你可以在那里看到蓝色管道，它们绑定了元素。它是在画布的帮助下完成的;在移动元素的同时，管道也在重新绘制;当您更改活动元素时，其所有连接都会将颜色更改为黄色（因此您会看到依赖关系）。不错的项目，我希望它暂时无法访问......

关于如何使用它的好文章是here

来自“An insight into the HTML5 Canvas Element”：

  

canvas元素很有趣   值得关注，因为它可以，   第一次，直接画   没有的浏览器中的图形   用于像Flash这样的外部插件   或者Java。画布之美就是那样   它完全通过简单的控制   JavaScript代码，意味着它建立在   功能强大的JavaScript   已经提供并且不需要   疯狂的学习曲线使用。

     

选择试用画布   其他新元素很简单   归结为它的功能   图形平台，本质上   使它成为一个潜在的有趣的   丰富的平台玩。它是   决定推动灵活   canvas元素会产生最多   我们可以使用的有趣结果   申请。

     

选择的另一个决定因素   画布是为了测试动画   能力和它的可能性   是一个潜在的Flash替代品。   现在Flash显然具有这些功能   然而，帆布永远无法效仿   尽管如此，这是一个令人兴奋的概念   确切地看到可以实现的目标   通常是帆布   通过达到Flash来完成。

阅读该文章以获取更多有用信息

PS。如果您的动画是关于移动的标签（如页面的某些部分），则画布不适合。 Canvas用于图形渲染。因此，在这种情况下，您将使用jquery或其他JS库。

Answer 2

以下是决定何时使用CSS3 Transitions / Animations或Canvas的最佳做法。请记住，如果您正在使用jQuery，那么他们将尽可能使用CSS3过渡或动画。

CSS3翻译/动画 - 如果您要设置DOM元素样式的动画，例如位置和大小，请使用这些

Canvas动画 - 如果您要制作更复杂的动画，请使用画布动画，例如，如果您正在创建在线游戏或构建物理模拟器。如果你是动画三维模型，你肯定会想要使用画布，以便你可以利用WebGL

Answer 3

Canvas可让您访问图形的像素级别。如果你想进行棋盘转换，可以使用画布中的脚本但不是jquery中的脚本。

有关可能（已经完成）的一些示例，请参阅http://www.netzgesta.de/transm/