html5扩充出来的元件,HTML5画布元件和SVG(html5 canvas element and svg)

博客讨论了HTML5中的Canvas和SVG元素的区别。SVG是矢量图形,适合静态图形和DOM操作,而Canvas是即时渲染,适用于动态图形和高性能需求。尽管SVG在某些方面更强大,但Canvas因其简单性和在3D渲染上的潜力而受到青睐。文章提供了多个资源链接以深入比较两种技术,并指出开发者通常根据项目需求和浏览器兼容性选择使用哪种技术。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我们为什么需要HTML5的Canvas元素,当同样可以通过嵌入SVG实现?

Answer 1:

SVG和帆布是不是真的互换技术。 SVG是一种类型的一切是从一个相当抽象模型(SVG文档)绘制保留模式图形。 在另一方面画布是一种即时模式图形,那里是没有模型和客户端(JavaScript的)必须照顾重绘,动画等。

Answer 2:

SVG是矢量图形标记语言,有DOM。 这使得它很容易改变它的创作后的内容。

画布是一个画面就像MS油漆没有撤消按钮。 你不能改变的内容。 您只能overpaint它。 这是非常高性能的,因为浏览器并不需要处理图像的完整DOM。 还有就是帆布能够处理3D的未来绘制的可能性。

Answer 3:

http://people.mozilla.com/~vladimir/xtech2006/具有良好的比较。

用帆布,你不必处理DOM,从而导致更快,更容易编写代码。 SVG是一个烂摊子作为规范,太...

Answer 4:

一个例证:我的博客引擎(博客)不支持SVG(它不是一个XHTML文档)。 我写了一个工具,转换SVG画布元素: http://plindenbaum.blogspot.com/2009/11/tool-converting-svg-to-canvas_22.html

Answer 5:

下面是如何分析一个简单的SVG和它画在画布上的解释..

http://www.ikeralbeniz.net/2010/11/03/jugando-con-html5-canvas-y-svg-i/ http://www.ikeralbeniz.net/2010/11/04/jugando-con- HTML5的帆布-Y-SVG-II /

在进一步职位的SVG解析器将透明胶片和梯度完成

Answer 6:

你可能会发现这个比较有用: http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

Answer 7:

因为我们再不需要担心什么支持这种嵌入;-)

在这种方式的重点应用developpers是要坚持标准,让客户端设计师这样做。 因此不遗余力大家担心的插件,版本,安全设置等..

Answer 8:

这是不是一个真正的技术答案,但我认为这是正确的答案。

底线是,我们并不需要两个。 是的,我知道有矢量和栅格图形,不同的方式来控制两者之间的路径,对象,动画等之间的差异,但对最终用户是完全一样的。 是的,SVG是一个小更强大,因为现在它不再存在,但你可以用帆布做同样的事情多一点的工作。

我相信现实是Canvas是针对XML本身在web开发压倒性反弹的一部分。 我相信大多数web开发者,尤其是那些有时间和资源有限,外“企业”的环境中工作,不喜欢XML的复杂度。 Canvas是一套就像HTML5优于XHTML,JSON优于XML,甚至YAML优于XML首选不管三七二十一一件事技术的一部分。

我认为这个想法是与具有许多特殊的工具做一件事正确和有效的,而不是做很多事情一个大型工具的* nix的理念。 (这也是类似于谁顺难以置信的精确和先进的变速器技术的一个齿轮直接传动的简单许多固定齿轮自行车骑手举行的理念。)

不要误会我的意思,我相信XML是没想起来,并通过精彩的人发展成为网络,编程,组态,数据存储等的最终瑞士军队刀一个令人难以置信的强大和辉煌科技; 但是,这并不意味着它更易于管理和风格的一系列复杂的路径比它只是借鉴一个像素。

我知道我的答案是自以为是,我不打算这是火焰。 我爱SVG,我希望它已经得到了多年来更多的支持(尤其是IE),但我觉得潮流走向画布转向只是由于标准制定者,并影响他们的Web开发人员的心理。

长期我想看到SVG使XML可选,并移动到一个更JSON状结构这就是简单的用JavaScript来操纵,甚至可能成为基于矢量的画布背景。 这将是在我看来,网络的最佳解决方案。

文章来源: html5 canvas element and svg

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值