[Canvas]canvas元素方法和DataURL、Blob

这里引用《HTML5  Canvas核心技术》一书中的表1-2，并稍作简化。

属性	描述
getContext()	返回与该Canvas元素相关的绘图对象。
toDataURL(type,quality)	返回一个数据地址(dataURL)，type：image/jpeg或image/png
toBlob(callback,type,args...)	创建一个用于表示此canvas元素图像文件的Blob，type：默认image/png，最后一个参数是介于0.0-1.0之间的值，用于表示JPEG图像的质量。

对于DataURL和Blob需要进一步了解：

调用，toDataURL后返回这样一串代码。dataURL是将数据按base64进行编码，并在前面声明数据类型的一种数据结构。将这个代码，直接用img src=“...”即可显示,如下图：

具体的base64编码规则可以参见阮老师的blog：http://www.ruanyifeng.com/blog/2008/06/base64.html

---

toBlob的使用结果如下

开始的时候，误以为该函数会返回一个Blob对象，看了文档后发现是将Blob作为参数传给回调函数。

利用iframe和Blob显示内容，结果如上图。