Canvas（二）图形及路径绘制

这次我们会借助canvas提供的方法绘制简单的图形及路径。

绘制矩形

canvas提供了3种方法：

fillRect(x, y, width, height): 填充式绘制矩形
strokeRect(x, y, width, height): 绘制矩形的边框
clearRect(x, y, width, height): 清空一个矩形区域，经常使用此方法来清空画布。

图形的基本元素是路径，可以想象成画笔在画布上的运动轨迹，然后对这个轨迹进行“填充(fill)”或者“描边(stroke)”。

基本方法：

beginPath：新建路径。

closePath: 闭合路径。

stroke：使用线条方式绘制路径轨迹。

fill：填充路径围成的区域

其实，上面的矩形可以看作一种特殊的路径。

canvas也提供了lineTo方法来绘制直线。

想象一下，如果画笔从不离开画布，那么它从一个图形到另一个图形的绘制过程中就会留下“轨迹”，为了避免这种情况，我们就需要手动“移动”画笔到正确的位置，这就是moveTo的作用。

常用绘制代码模式:

ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo();
ctx.lineTo();
ctx.lineTo();
ctx.closePath();
ctx.stroke() // or ctx.fill()

绘制三角形：

常见问题:

beginPath()的作用并不能代替moveTo(0, 0)

还有绘制曲线方法，Path2D方法，更详细的可以查看MDN文档