canvas学习之路（一）基础绘图功能解析

canvas的一些基础画图功能还是比较容易懂的，只是有些功能初次接触的话比较难以理解，需要自己仔细琢磨。我把这些功能以及自己学习过程遇到的问题写下来希望能帮到大家。

（一）canvas介绍

canvas是H5的的新功能，本身没有画图的功能，相当于一块画板，所有的绘图工作在画板上完成。画图的工作在js内部完成。
画板的建立

这里要注意的是canvas画板建立在body中，其宽高一定要写在元素内部。其属性可以在head内建立一个style。
　　在script中图中的canvas和cts都是必须引入的变量，是一种固定写法模式，后者代表在平面上绘制图形。

画板的坐标
需要牢记两条规则：1、画板默认的坐标原点在画板的左上角（坐标远点是可以通过一定的方法移动的，后面会讲）
2、X轴向右，Y轴向下为正方向。

（二）绘制四边形

绘制四边有两种方法，其中一种是独有方法，我先介绍这种特殊的方法。
- fillRect（） 通过填充填充方式绘制正方形
- strokeRect（） 通过描边方式，绘制正方形
- clearRe