080_html5 Canvas和SVG

1. Canvas和SVG都允许您在浏览器中创建图形, 但是它们在根本上是不同的。

2. SVG

2.1. SVG是一种使用XML描述2D图形的语言。

2.2. SVG基于XML, 这意味着SVG DOM中的每个元素都是可用的。您可以为某个元素附加JavaScript事件处理器。

2.3. 在SVG中, 每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化, 那么浏览器能够自动重现图形。

3. Canvas

3.1. Canvas通过JavaScript来绘制2D图形。

3.2. Canvas是逐像素进行渲染的。

3.3. 在Canvas中, 一旦图形被绘制完成, 它就不会继续得到浏览器的关注。如果其位置发生变化, 那么整个场景也需要重新绘制, 包括任何或许已被图形覆盖的对象。

4. Canvas与SVG的比较

4.1. Canvas

4.1.1. 依赖分辨率。

4.1.2. 不支持事件处理器。

4.1.3. 弱的文本渲染能力。

4.1.4. 能够以.png或.jpg格式保存结果图像。

4.1.5. 最适合图像密集型的游戏, 其中的许多对象会被频繁重绘。

4.2. SVG

4.2.1. 不依赖分辨率。

4.2.2. 支持事件处理器。

4.2.3. 最适合带有大型渲染区域的应用程序(比如谷歌地图)。

4.2.4. 复杂度高会减慢渲染速度(任何过度使用DOM的应用都不快)。

4.2.5. 不适合游戏应用。

080_html5 Canvas和SVG相关推荐

Canvas VS . SVG
SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的.您可以为某个元素附加 JavaScript 事件处理器. 在 SV ...
HTML5 Canvas、内联 SVG、Canvas vs. SVG
canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canv ...
H5中canvas和svg绘图方式介绍
在HTML5中包括了两种绘图方式,canvas和svg(矢量呈现),而与canvas不同的是,svg是一种XML标记语言,它既可以单独保存以".svg"为后缀的文件在浏览器中打开显 ...
Canvas or SVG？一张好图，两手准备，就在 ECharts 4.0
Canvas 和 SVG 是两大基于浏览器的渲染方案,在选择图表库的时候,用户有时也会在这两者之间纠结.但是纠结的时候,你是否真的明白这两者在哪些方面有优劣? ECharts 4.0 推出 Canva ...
HTML5 Canvas vs. SVG vs. div
本文翻译自:HTML5 Canvas vs. SVG vs. div What is the best approach for creating elements on the fly and be ...
canvas webGL SVG 比较
https://blog.csdn.net/Thea12138/article/details/79723380 对每个类型的封装库:https://blog.csdn.net/u010513603/ ...
html5 svg特性,HTML5新特性——HTML 5 Canvas vs. SVG
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...
HTML画布与SVG（Canvas vs. SVG）
目录画布(Canvas) 什么是 Canvas? 创建 Canvas 元素通过 JavaScript 来绘制理解坐标更多 Canvas 实例实例 - 线条实例 - 圆形实例 - 渐变实 ...
HTML5的图像系统Canvas与SVG
在HTML5之前,没有标准的提供可供Javascript脚本调用的图像系统,以前的做法通常是通过Div来画点.线.矩形这种非常"笨"的办法来变相的绘图,虽然很"笨&quo ...

080_html5 Canvas和SVG

080_html5 Canvas和SVG相关推荐

最新文章

热门文章