Canvas 与 SVG 动画(效果[滤镜]和性能)

发布于 2024-09-25 18:44:38 字数 352 浏览 7 评论 0原文

我正在开发一个应用程序,它应该在 Web 浏览器(IE 支持完全可选)和 iPhone 上同样流畅地运行,并且已经测试了多个库几天,包括:jQuery SVG、CAKE(Canvas Animation Kit Experiment)、Burst Engine、Processing.js和拉斐尔,但尚未找到适合该实验的人。

输入是可选的 - 无论是从矢量渲染的 SVG 还是 PNG,动画库的唯一两个要求是能够对图像进行动画处理(旋转),并逐渐应用模糊滤镜或类似“轨迹”的效果。

就性能和上述效果而言,我应该选择 SVG 还是 Canvas?

以前该项目使用的是 Flash,但考虑到趋势和缺乏 iPhone 支持,我决定改用更先进的软件。

I am developing an application that should run equally smoothly on a web browser (IE support completely optional) and on iPhones and have tested various libraries for days, including: jQuery SVG, CAKE (Canvas Animation Kit Experiment), Burst Engine, Processing.js and Raphael, and have yet to find the right one for this experiment.

The input is optional - whether an SVG or a PNG rendered from the vector, the only two requirements for the animation library are to be able to animate (rotate) the image, and gradually apply a blur filter or a "trails"-like effect.

Should I go for SVG or Canvas, performance- and the forementioned effectswise?

Previously the project was in Flash, but regarding the trends and lack of iPhone support, I decided to switch to a more progressive software.

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

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

发布评论

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

评论(1

苏璃陌 2024-10-02 18:44:38

您可以在此处比较滤镜性能 svgcanvas 自己。另一个示例展示了如何制作 svg 3d 灯光效果canvas 3d 灯光效果

chromeexperiments 显示画布和 svg。还有 svg-wow.org 或多或少做了同样的事情。

Here you can compare filter performance svg vs canvas yourself. Another example shows how to do an svg 3d lighting effect vs canvas 3d lighting effect

There are many nice demos over at chromeexperiments showing both canvas and svg. And there's svg-wow.org which does the same more or less.

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