canvas绘制基本图形——矩形

我们在初识canvas的时候已经用它画过矩形了，今天我们就总结下矩形的绘画方式

rect

rect就是简单最基本的矩形绘制方法。它拥有四个参数，第一二两个参数表示他的x，y坐标，注意这是确定矩形左上角的坐标。第三和第四两个参数则表示矩形的宽高。

stroke

使用rect后我们发现页面并没有矩形显示，这其实并非rect没起作用。rect只负责给你一个矩形，但是你到底是想要一个背景色填充的矩形还是只要一个绘制路径的矩形它并不知道，所以你还需要借助其他方法让他显形，stroke就是描绘绘制路径的方法。

ctx.rect(0, 120, 100, 100) 
ctx.stroke()
1
2

通过这样我们就能得到一个拥有边框的矩形。

ctx.rect(0, 120, 100, 100) 
ctx.fill()
1
2

fill

很多时候我们想要的其实是一个填充颜色的矩形，fill方法就是专门为图形填充颜色，只能填充当前设置的填充样式的颜色。默认情况下，填充样式是黑色。

clearRect

clearRect可以在页面上清除一个矩形的空间，简单来理解就是扣除一块空白的矩形图形。

fillRect和strokeRect

我们发现每次绘制一个可见的矩形都需要进行至少两步操作，这是十分繁琐的，有没有更简单的方法？
fillRect可以直接为我们绘制出一个填充颜色的矩形
strokeRect则是可以直接绘制出一个有边框的矩形