首先引用 MDN 上对于 canvas 的定义：

<canvas> 是 HTML5 新增的元素，可使用 JavaScript 脚本来绘制图形。例如：画图，合成照片，创建动画甚至实时视频处理与渲染。

也就是说这是浏览器提供给我们的一个画布和丰富的接口，可以用来制作各种复杂的效果。 <canvas> 元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文。其可以用来绘制和处理被现实的页面。 这是 canvas 2d 的坐标，可以看到左上角为原点，横轴为 x 轴，纵轴为 y 轴。我们所有的 canvas2d 的功能实现都是在这个坐标系中。

基本用法

本文只简单介绍一下矩形