html5中为什么要使用canvas来做动画?
我是 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
在画布的帮助下,您可以创建 2D 图形应用程序、动画、图像的简单转换(如旋转它们)、GUI 等。一些示例:
这里有关于如何使用它的好文章
来自“深入了解HTML5 Canvas 元素”:
阅读该文章以获得更多有用的信息
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:
Good article about how to use it is here
From "An insight into the HTML5 Canvas Element":
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.
以下是决定何时使用 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
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/