Canvas & SVG

在多媒体课上有一个presentation的环节，我所在小组选择了介绍canvas，下面内容是我搜集的一些关于canvas&svg的一些资料。

1. What is it?

什么是SVG：http://www.gissea.cn/html/2006-04/29.htm

SVG，全称为Scalable Vector Graphics（可伸缩矢量图形）。它是W3C制定的、用矢量描述图形的XML应用标准。它有着许多的优点，比如可扩充性（scalable），动态的，交互性强。SVG支持无极放大，对SVG图片进行任意比例的放大都不会损害图片的显示（没有太多的失真），其他诸如BMP，JPEG格式的图片都不支持无级放大。SVG有动画元素，只要在SVG文件中嵌入SVG动画元素就可以实现动画效果了。同时SVG也定义了丰富的事件，包括鼠标事件和键盘事件，只要对SVG进行相关的脚本编程就可以实现SVG文件的交互操作。还有导入导出容易等等

什么是canvas http://kb.operachina.com/node/190

很难说清楚，一个html5的elements，像<Img/>一样方便使用视频，图片修改，类似flash.

<canvas>是一个新的HTML元素，这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。

比较：http://www.javaeye.com/news/10484-html5(推荐里面的视频)

    SVG à High level Canvas à Low level

-- Import/Export -- No mouse interaction

-- Easy UIs -- High Animation

-- Interactive -- JS Centric

-- Medium Animation -- More Bookkeeping

-- Tree of objects -- Pixels

2. How can it work? (who supports them)

SVG: Chrome, Firefox Opera Safari 都支持，独缺IE

Canvas: 目前支持HTML5标准的浏览器，Firefox 3.5、Safari 4、Google Chrome 3.0 beta和Opera 10等都实现了Canvas元素和音频/视频标签支持

让IE支持Html5的方法有多种：

1. 利用JS库

      a. http://blog.bingo929.com/html5-ie-enabling-script.html (服务器端改变)

      b. SVG web是一个JavaScript库，为浏览器提供对SVG的支持。

      http://www.javaeye.com/news/10790-svg-web-beholder

2. 安装Google Chrome Frame 插件支持Html 5 (客户端改变)

      http://developer.51cto.com/art/200909/154349.htm

3. What can it do?

a. map 通过数据渲染地图

b. game 第一视角的地图/类似flash游戏

c. 画图工具/图形编辑器 类似windows的画图工具

4. Reference links

SVG中国有关于SVG的详细例子(内容很多)

http://www.chinasvg.com/solution/web-applications/design-of-the-svg-map-browser-in-web.html

Processing.js上有关于支持canvas的一个类库

http://processingjs.org/ demo：http://processingjs.org/learning/basic

使用 HTML 5 canvas 和光线投影算法创建伪 3D 游戏

http://kb.operachina.com/node/197