canvas绘图学习

画布栅格

画布栅格（canvas grid）以及坐标空间

如右图所示，canvas元素默认被网格所覆盖。

通常来说网格中的一个单元相当于canvas元素中的一像素。

绘制矩形

不同于SVG，HTML中的元素canvas只支持一种原生的图形绘制：矩形。

所有其他的图形的绘制都至少需要生成一条路径。

canvas提供了三种方法绘制矩形：

fillRect(x, y, width, height)

绘制一个填充的矩形

strokeRect(x, y, width, height)

绘制一个矩形的边框

clearRect(x, y, width, height)

清除指定矩形区域，让清除部分完全透明。