使用 canvas 画矩形，实现橡皮擦功能

在画图之前，需要了解「画布的坐标系」，它的左上角坐标为（0，0），为原点，一图胜前言，关于坐标系的深入理解，看今天的的第二篇文章：

canvas 只提供了两种绘制图形的 API，一种是矩形，另一种是绘制各种路径，比如直线、曲线，通过不同的路径可以绘制出不同的图形。

画矩形

先了解下，这几个 API 的作用：

fillRect(x, y, width, height)

绘制一块矩形区域，该矩形区域会被填充，x，y 为距原点的坐标，width 和 height 表示矩形的宽高。

fillStyle 为画布设置填充色，填充色是一个颜色的字符串即可，比如 #555， rgb(5, 5, 5, 1), red；还可以设置渐变；设置填充的 pattern ，比如使用图片进行填充。

创建一个矩形（注意，我们只写核心代码，其余代码可以在 github 找到。共用的创建 canvas 代码忽略，可以参考