使用 canvas 绘图的基本步骤：
一. 获取画布对象
获取画布对象，可以有多种方式，一般常用的有两种：
1. 在 `HTML` 页面中设置一个 `canvas` 标签，然后获取该标签节点对象
<!-- 默认大小是 300*150，可以使用属性进行宽高设置，注意不要使用css样式设置宽高 -->
<canvas width="400" height="300" id="c1"></canvas>
<script>
const c1 = document.getElementById('c1')
</script>2. 创建一个 canvas 对象，将其插入到页面中
const c2 = document.createElement('canvas')
c2.width = 400
c2.height = 300
document.body.append(c2)二. 从画布对象上获取上下文对象
let ctx = c2.getContext('2d')三. 使用canvas的API会进行绘画
// 绘制矩形填充 // https://www.canvasapi.cn/CanvasRenderingContext2D/fillRect ctx.fillRect(10, 20, 50, 50)
更多API，可参阅文档：
https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D
