Canvas和SVG的区别
- canvas是使用JavaScript动态生成的，svg是使用XML静态描述的
- canvas是基于位图的，适合像素处理和动态渲染，放大会失真；svg是基于矢量的，放大不会失真
Canvas元素简介
- Canvas是一个行内块元素（inline-block），一般需要指定三个属性：id，width，height。默认情况下宽度300像素，高度150像素，不要在css中定义canvas的宽高，会出现偶发性不起作用的情况
- 一般情况下通过id获取到canvas对象cnv，通过cnv的getContext方法获取到canvas的上下文对象，最后使用上下文环境的属性和方法进行绘制图形
- 对于IE浏览器，暂时只有I9以上版本支持canvas，对于低版本浏览器，可以使用explorercanvas扩展，但是仍有很多限制
Canvas对象
- 常用方法：
| 方法 | 说明 |
|---|---|
| getContext('2d') | 获取Canvas 2D 上下文环境对象 |
| toDataURL(type) | 获取canvas对象产生的位图的字符串 |
在Canvas中，我们可以使用toDataURL()方法来将画布保存为一张图片。
type是可选参数，表示输出的MIME类型，如果参数被省略，则将使用'image/png'类型
MIME类型，是设定用一种应用程序来打开某种扩展名的文件的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定的应用程序来打开文件。
使用toDataURL()方法将画布保存为图片，实际上是把Canvas当前的绘画状态输出到一个data URL地址所指向的数据中的过程。所谓的data URL，是指目前能被大多数浏览器识别的一种Base64位编码的URl，主要用于可嵌入网页的，不需要从外部文件嵌入的小型数据，例如img元素的图片文件等。
data URL的两个用处：
- 发送图片数据到Web服务器的数据库，进行长期保存。
- 在浏览器中直接打开，进行本地保存。
对于在浏览器中打开并进行本地保存，我们一般使用以下方法：
window.location = cnv.toDataURL('image/png')
- 常用属性：width，height
