html5中为什么要使用canvas来做动画?

发布于 2024-10-15 04:22:05 字数 114 浏览 3 评论 0原文

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

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

I'm new to html5 and have been playing around with the canvas. I'm wondering when the canvas would really be necessary/useful? i.e. when is it meant to be used?

If i need to do simple animation, like move tags around, do i really need a canvas or is it better/easier to just use jquery/js?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

烟─花易冷 2024-10-22 04:22:05

在画布的帮助下,您可以创建 2D 图形应用程序、动画、图像的简单转换(如旋转它们)、GUI 等。一些示例:

  1. 小行星游戏
  2. 拼图游戏
  3. 关于 GUI,不幸的是我无法加载网站,不知道为什么......它被称为 iWidgets.com,唯一的我发现的是屏幕截图。您可以在那里看到蓝色管道,它们绑定元素。这是在画布的帮助下完成的;在移动元素的同时,管道也在重新绘制;当您更改活动元素时,其所有连接的颜色都会更改为黄色(因此您可以看到依赖关系)。不错的项目,我希望它暂时无法访问...

这里有关于如何使用它的好文章

来自“深入了解HTML5 Canvas 元素”:

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

选择使用画布进行实验
超越其他新元素只是
归结为它的功能
图形平台,本质上是
使其成为一个潜在的有趣且
丰富的游玩平台。原来是
决定推动灵活
canvas 元素会产生最多
我们可以使用的有趣结果
应用程序。

另一个选择的决定因素
画布是用来测试动画的
能力及其可能性
是潜在的闪存替代品。
现在Flash显然具有这样的功能
然而canvas永远无法模仿
尽管如此,这是一个令人兴奋的概念
看看到底能取得什么成果
与通常情况下的画布
通过接触 Flash 来完成。

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

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

With help of canvas you can create 2D graphic applications, animations, simple transformation of images (like rotating them), GUI etc. Some examples:

  1. Asteroids game
  2. jigsaw puzzle
  3. About GUI, unfortunately I can't load a site, no idea why... it was called iWidgets.com, the only thing I've found is a screenshot. You can see blue pipeline there, they bound elements. It was done with help of canvas; while moving elements, pipelines also were redrawing; when you change active element all its connections changes color to yellow (so you see dependencies). Nice project, I hope it is not accessible just for a while...

Good article about how to use it is here

From "An insight into the HTML5 Canvas Element":

The canvas element is interesting and
worthy of focus because it enables,
for the first time, direct drawing of
graphics within a browser without the
use for an external plugin like Flash
or Java. The beauty of canvas is that
it’s controlled entirely via simple
JavaScript code, meaning it builds on
the powerful functionality JavaScript
already provides and doesn’t require a
crazy learning curve to use.

Choosing to experiment with canvas
over other new elements was simply
down to it’s functionality as a
graphics platform, which inherently
makes it a potentially interesting and
rich platform to play with. It was
decided that pushing the flexible
canvas element would produce the most
interesting results that we can use in
the application.

Another deciding factor for choosing
canvas was to test the animation
capabilities and the possibility of it
being a potential Flash replacement.
Now Flash obviously has features that
canvas could never emulate, however
it’s an exciting concept nonetheless
to see exactly what could be achieved
with canvas that would normally be
done by reaching for Flash.

read that article to get more useful information

PS. If your animation is about tags moving (like parts of your page), then canvas does not fit. Canvas is for graphic rendering. So in that case you will use jquery or other JS libraries.

葬心 2024-10-22 04:22:05

以下是决定何时使用 CSS3 过渡/动画或画布的最佳实践。请记住,如果您使用 jQuery,那么在可能的情况下,他们将在幕后使用 CSS3 过渡或动画。

CSS3 翻译/动画 - 如果您要对 DOM 元素样式进行动画处理,例如位置和大小,请使用这些

画布动画 - 如果您要对更复杂的内容进行动画处理,例如要创建在线游戏或构建物理模拟器,请使用画布动画。如果您要制作 3D 模型动画,您肯定会想要使用 canvas,以便可以利用 WebGL

Here's the best practices for deciding when to use CSS3 Transitions / Animations or Canvas. Keep in mind that if you're using jQuery, under the covers they will be using CSS3 transitions or animations when possible.

CSS3 Translations / Animations - use these if you're animating DOM element styles, such as position and size

Canvas animations - use canvas animations if you're animating something more complex, like if you're creating an online game or building a physics simulator. If you're animating 3-d models, you'll definitely want to use canvas so that you can leverage WebGL

眼趣 2024-10-22 04:22:05

Canvas 使您可以访问图形的像素级别。如果你想进行棋盘过渡,你可以使用 canvas 中的脚本来实现,但不能使用 jquery 来实现。

有关可能的示例(已经完成),请参阅 http://www.netzgesta.de/transm/

Canvas gives you access to the pixel level of the graphics. If you wanted to do a checkerboard transition you could do that with a script in canvas but not in jquery.

For a few examples of what is possible (already been done) see http://www.netzgesta.de/transm/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文