C#231课的主要内容

今天主要学习了以下知识点：

         HTML5内联SVG

HTML5支持内联SVG

什么是SVG？

SVG指可伸缩矢量图形

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

SVG使用XML格式定义图形

SVG图像在放大或改变尺寸的情况下其质量不会有双视

SVG是万维网联盟的标准

SVG的优势

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

SVG图像可通过文本编辑器来创建和修改

SVG图像可被搜索，索引，脚本化或压缩

SVG是可伸缩的

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

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

浏览器支持

把SVG直接嵌入HTML页面

在HTML5中你能够将SVG元素直接嵌入HTML页面中：

实例

HTML5 Canvas vs.SVG

Canvas和SVG都允许你在浏览器中创建图形，但是他们在根本上是不同的。

SVG

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

SVG基于xml,这意味着SVG DOM中的每个元素都是可用的，你可以为某个元素附加JavaScript事件处理器

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

Canvas

Canvas通过JavaScript来绘制2D图形

Canvas是逐像素进行渲染的。

在canvas中，一旦图形被绘制完成，他就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包

括任何或许已被图形覆盖的对象

Canvas与SVG的比较

Canvas

依赖分辨率

不支持事件处理器

弱的文本渲染能力

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

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

SVG

不依赖分辨率

支持事件处理器

最适合带有大型渲染区域的应用程序

复杂度高会减慢渲染速度

不适合游戏应用