HTML5 提供的 canvas 元素，可以让我们使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，我们可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。这次先说说如何绘制基本矩形。
1 搭建 Canvas 2D 环境
（1）引入 <canvas> 标签
在 HTML 的 <body> 中新增一个 <canvas> 标签。形如：
<canvas id="canvas" width="500" height="500"></canvas>
<canvas> 标签有以下3个主要属性。
| 属性 | 说明 |
|---|---|
| id | 标识该 <canvas> 标签。 |
| width | 画布宽度，以像素为单位 。 |
| height | 画布高度，以像素为单位 。 |
（2）获取 Canvas 对象以及 2D 环境
利用下面的代码，就可以获取 Canvas 对象的 2D 环境。
let theCanvas = document.querySelector("#canvas");
let context = theCanvas.getContext("2d");
这样， Canvas 2D 环境就搭建好了，我们可以开始绘图啦O(∩_∩)O
2 Canvas 坐标体系
Canvas 中的坐标体系是以左上角（ 0 ， 0 ）为原点的 windows 窗体和 svg 也是如此。这样设计主要是因为过去标准的 CRT 监视器是从上到下、从左到右来显示图像的。
3 绘制基本矩形
绘制基本矩形有 3 种不同方式，它们分别是填充、描边以及清除。
（1）填充
利用 fillRect() 方法，就可以绘制填充矩形。 fillRect() 方法提供以下入参：
| 参数 | 描述 |
|---|---|
| x | 矩形左上角的 x 坐标 |
| y | 矩形左上角的 y 坐标 |
| width | 矩形的宽度，以像素计 |
| height | 矩形的高度，以像素计 |
//绘制填充矩形
context.fillStyle = '#3498db';
context.fillRect(20, 20, 145, 85);
context.fillStyle = '#1bbc9d';
context.fillRect(200, 20, 145, 85);
context.fillStyle = '#dd7195';
context.fillRect(380, 20, 145, 85);
运行结果：
fillStyle 属性用于指定填充的颜色，颜色使用 RGB 来指定。
（2）描边
利用 strokeRect() 方法，可以绘制描边矩形。 strokeRect() 方法提供以下入参：
| 参数 | 描述 |
|---|---|
| x | 矩形左上角的 x 坐标 |
| y | 矩形左上角的 y 坐标 |
| width | 矩形的宽度，以像素计 |
| height | 矩形的高度，以像素计 |
context.lineWidth = 1;
context.strokeStyle = '#3498db';
context.strokeRect(20, 200, 145, 85);
context.strokeStyle = '#1bbc9d';
context.strokeRect(200, 200, 145, 85);
context.strokeStyle = '#dd7195';
context.strokeRect(380, 200, 145, 85);
运行结果：
strokeStyle 属性用于指定边线的颜色；lineWidth 用于指定边线宽度。
（3）清除
clearRect() 方法用于清除指定矩形区域，让其完全透明，一般用于制作特殊图示。它拥有以下属性：
| 参数 | 描述 |
|---|---|
| x | 要清除的矩形左上角的 x 坐标 |
| y | 要清除的矩形左上角的 y 坐标 |
| width | 要清除的矩形的宽度，以像素计 |
| height | 要清除的矩形的高度，以像素计 |
context.fillStyle = '#3498db';
context.fillRect(20, 350, 550, 60);
//指定区域透明
for (let i = 1; i < 20; i++) {
let x = 30 * i;
console.log('x -> ' + x);
context.clearRect(x, 350, 10, 10);
}
运行结果：
在实心矩形中，通过清除多个透明矩形区域，就可以制作出这样的城墙图示啦O(∩_∩)O
