这是我参与2022首次更文挑战的第26天，活动详情查看：2022第一次更文挑战
一、基本的画布功能
创建元素时至少要设置其 width 和 height 属性，这样才能告诉浏览器在多大面积上绘 图。出现在开始和结束标签之间的内容是后备数据，会在浏览器不支持元素时显示。比如： A drawing of something. 与其他元素一样，width 和 height 属性也可以在 DOM 节点上设置，因此可以随时修改。整个元 素还可以通过 CSS 添加样式，并且元素在添加样式或实际绘制内容前是不可见的。 要在画布上绘制图形，首先要取得绘图上下文。使用 getContext()方法可以获取对绘图上下文的 引用。对于平面图形，需要给这个方法传入参数"2d"，表示要获取 2D 上下文对象：
let drawing = document.getElementById("drawing");
// 确保浏览器支持<canvas>
if (drawing.getContext) {
let context = drawing.getContext("2d");
// 其他代码
}
使用元素时，最好先测试一下 getContext()方法是否存在。有些浏览器对 HTML 规范 中没有的元素会创建默认 HTML 元素对象。这就意味着即使 drawing 包含一个有效的元素引用， getContext()方法也未必存在。 可以使用 toDataURL()方法导出元素上的图像。这个方法接收一个参数：要生成图像 的 MIME 类型（与用来创建图形的上下文无关）。例如，要从画布上导出一张 PNG 格式的图片，可以这 样做：
let drawing = document.getElementById("drawing");
// 确保浏览器支持<canvas>
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。
二、 绘图上下文
2D 绘图上下文提供了绘制 2D 图形的方法，包括矩形、弧形和路径。2D 上下文的坐标原点(0, 0)在 元素的左上角。所有坐标值都相对于该点计算，因此 x 坐标向右增长，y 坐标向下增长。默认 情况下，width 和 height 表示两个方向上像素的最大值
2.1填充和描边
2D 上下文有两个基本绘制操作：填充和描边。填充以指定样式（颜色、渐变或图像）自动填充形 状，而描边只为图形边界着色。大多数 2D 上下文操作有填充和描边的变体，显示效果取决于两个属性： fillStyle 和 strokeStyle。 这两个属性可以是字符串、渐变对象或图案对象，默认值都为"#000000"。字符串表示颜色值，可 以是 CSS 支持的任意格式：名称、十六进制代码、rgb、rgba、hsl 或 hsla。比如：
let drawing = document.getElementById("drawing");
// 确保浏览器支持<canvas>
if (drawing.getContext) {
let context = drawing.getContext("2d");
context.strokeStyle = "red";
context.fillStyle = "#0000ff";
}
这里把 strokeStyle 设置为"red"（CSS 颜色名称），把 fillStyle 设置为"#0000ff"（蓝色）。 所有与描边和填充相关的操作都会使用这两种样式，除非再次修改。这两个属性也可以是渐变或图案， 本章后面会讨论。
