为啥在 html5 中使用画布制作动画？

Posted 2023-03-05

技术标签:

【中文标题】为啥在 html5 中使用画布制作动画？【英文标题】：Why use canvas for animation in html5?为什么在 html5 中使用画布制作动画？ 【发布时间】：2011-06-18 19:50:32 【问题描述】：

我是 html5 新手，一直在玩画布。我想知道画布什么时候真的有必要/有用？即它打算什么时候使用？

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

【问题讨论】：

【参考方案1】：

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

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

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

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

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

选择尝试画布超越其他新元素简直就是归结为它的功能图形平台，其固有使它成为一个潜在的有趣和丰富的平台玩。它是决定推灵活画布元素会产生最多我们可以使用的有趣结果应用程序。

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

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

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

【讨论】：

【参考方案2】：

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

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

画布动画 - 如果您正在制作更复杂的动画，例如创建在线游戏或构建物理模拟器，请使用画布动画。如果您正在制作 3-d 模型的动画，那么您肯定会想要使用画布，这样您就可以利用 WebGL

【讨论】：

【参考方案3】：

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

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

【讨论】：