javascript七基础学习系列二千一百五十九：基本的画布功能

创建元素时至少要设置其width 和height 属性，这样才能告诉浏览器在多大面积上绘
图。出现在开始和结束标签之间的内容是后备数据，会在浏览器不支持元素时显示。比如：
A drawing of something.
与其他元素一样，width 和height 属性也可以在DOM 节点上设置，因此可以随时修改。整个元
素还可以通过CSS 添加样式，并且元素在添加样式或实际绘制内容前是不可见的。
要在画布上绘制图形，首先要取得绘图上下文。使用getContext()方法可以获取对绘图上下文的
引用。对于平面图形，需要给这个方法传入参数"2d"，表示要获取2D 上下文对象：
let drawing = document.getElementById(“drawing”);
// 确保浏览器支持
if (drawing.getContext) {
let context = drawing.getContext(“2d”);
// 其他代码
}
使用元素时，最好先测试一下getContext()方法是否存在。有些浏览器对HTML 规范
中没有的元素会创建默认HTML 元素对象。这就意味着即使drawing 包含一个有效的元素引用，
getContext()方法也未必存在。
可以使用toDataURL()方法导出元素上的图像。这个方法接收一个参数：要生成图像
的MIME 类型（与用来创建图形的上下文无关）。例如，要从画布上导出一张PNG 格式的图片，可以这
样做：
let drawing = document.getElementById(“drawing”);
// 确保浏览器支持
if (drawing.getContext) {
// 取得图像的数据URI
let imgURI = drawing.toDataURL(“image/png”);
// 显示图片
let image = document.createElement(“img”);
image.src = imgURI;
document.body.appendChild(image);
}
浏览器默认将图像编码为PNG 格式，除非另行指定。Firefox 和Opera 还支持传入"image/jpeg"
进行JPEG 编码。因为这个方法是后来才增加到规范中的，所以支持的浏览器也是在后面的版本实现的，
包括IE9、Firefox 3.5 和Opera 10。