创建元素时至少要设置其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。
04-21
174
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)