canvas和svg

什么是canvas

　　HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。

　　不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。

　　getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

　　本手册提供完整的 getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。

　　属性　　　　方法

　　fillStyle 　　设置或返回用于填充绘画的颜色、渐变或模式

　　strokeStyle 　　设置或返回用于笔触的颜色、渐变或模式

       shadowColor 　　设置或返回用于阴影的颜色

　　shadowBlur 　　设置或返回用于阴影的模糊级别

　　shadowOffsetX 　　设置或返回阴影距形状的水平距离

　　shadowOffsetY　　 设置或返回阴影距形状的垂直距离

什么是SVG

　　SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

　　SVG 用来定义用于网络的基于矢量的图形

　　SVG 使用 XML 格式定义图形

　　SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

　　SVG 是万维网联盟的标准

　　SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

SVG的历史和优势

       在 2003 年一月，SVG 1.1 被确立为 W3C 标准。

       参与定义 SVG 的组织有：Sun公司（已被Oracle公司收购）、Adobe、苹果公司、IBM 以及柯达。

       与其他图像格式相比，使用 SVG 的优势在于：

　　SVG 可被非常多的工具读取和修改（比如记事本）

　　SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。

　　SVG 是可伸缩的

　　SVG 图像可在任何的分辨率下被高质量地打印

　　SVG 可在图像质量不下降的情况下被放大

　　SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）

　　SVG 可以与 Java 技术一起运行

　　SVG 是开放的标准

　　SVG 文件是纯粹的 XML

　　SVG 的主要竞争者是 Flash。

　　与 Flash 相比，SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。

二者的区别

　　Canvas

 

　　　　依赖分辨率

 

　　　　不支持事件处理器

 

　　　　弱的文本渲染能力

 

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

 

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

 

　　SVG

 

　　　　不依赖分辨率

 

　　　　支持事件处理器

 

　　　　最适合带有大型渲染区域的应用程序（比如谷歌地图）

 

　　　　复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）

 

　　　　不适合游戏应用