canvas的一些基础画图功能还是比较容易懂的，只是有些功能初次接触的话比较难以理解，需要自己仔细琢磨。我把这些功能以及自己学习过程遇到的问题写下来希望能帮到大家。
（一）canvas介绍
canvas是H5的的新功能，本身没有画图的功能，相当于一块画板，所有的绘图工作在画板上完成。画图的工作在js内部完成。
画板的建立
这里要注意的是canvas画板建立在body中，其宽高一定要写在元素内部。其属性可以在head内建立一个style。
在script中图中的canvas和cts都是必须引入的变量，是一种固定写法模式，后者代表在平面上绘制图形。
画板的坐标
需要牢记两条规则：1、画板默认的坐标原点在画板的左上角（坐标远点是可以通过一定的方法移动的，后面会讲）
2、X轴向右，Y轴向下为正方向。
（二）绘制四边形
绘制四边有两种方法，其中一种是独有方法，我先介绍这种特殊的方法。
- fillRect（） 通过填充填充方式绘制正方形
- strokeRect（） 通过描边方式，绘制正方形
- clearRect（） 表示清除范围内的元素
1、fillRect（x,y，width，height）
x代表起始点坐标x，y代表起始点坐标y，width代表宽度，height代表gaodu。fillRect（）效果如下：
默认情况下，fillRect（）的填充效果是黑色，如图3.但是我们可以用ctx.fillStyle来进行修改。写法如图2所示。如果ctx.fillStyle = “green”;被我激活，效果如下：
。
这里有一个问题需要注意：ctx.fillStyle = “green”要写在ctx.fillRect（）前面一行才有效果。
2、strokeRect（） 语法相同，只是正方形构造方式上有差别。如下图：
如果我们要修改边的大小和颜色可通过以下方式：
- 修改边线大小 lineWidth = i;（i表示任意数字，此处不需要写px，也不需要标引号）
- 修改颜色 stokeStyle = “”；
如下面代码和事例：
如果我们要加入填充怎么办？
直接把图7中代码被注销的部分激活即可。（暂时只发现这种办法）
3、clearRect（）将某个区域内的所有绘画效果全部清除，就像画板最初的样子。
!
（三）路径绘图
除了通过（二）方法绘制四边形外，图形的其他绘制方法都要通过以下四个步骤：
1. 开始一个路径
2. 在路径上使用绘图命令绘制
3. 闭合路径
4. 路径完成后可以描边或填充。
图11表示绘制直线图形的基本功能。lineTo表示两点之间用直线连接。下面我讲解以下绘制曲线的方式。
贝塞尔曲线
绘制贝塞尔曲线有两种方式，一种是通过bezierCurveTo（），一种是通过quadraticCurveTo（）。前者可以设置多个控制点，后者只能设置一个控制点。
如图12
ctx.bezierCurveTo（）中前面6个参数（120,60）（100,100）（100,120）表示三个控制点的坐标，最后参数（100,200）表示图形最后一个点的坐标。
ctx.quadraticCurveTo（）前面两个参数（120,280）表示控制点坐标，后面两个参数（200,300）表示图形最后一个点的坐标。
起始点已经由moveTo（200,100）给出。
绘制圆
ctx.arc（200,200，200,0,1*Math.PI，false）
前面两个参数表示圆心的坐标，第三个参数表示圆的半径，第四参数表示起始角（沿X轴正方向为为起始角），Math.PI为圆周率π，false表示沿顺时针方向画圆。（true表示逆时针方向）
图13代码效果如图14所示。
（四）特殊绘图功能
1、旋转rotate
图15代码是有错误的。ctx.rotate（Math.PI/4不应该放在最后面）。因为js代码是由上到下执行，图已经画完再发现图画歪需要旋转一定的角度才可以，这显然是不可能的事。所以在构思阶段就要确立好画的角度。此处ctx.rotate（）应该放在该段代码的最前端。
2、translate（）重新映射坐标远点。
默认坐标远点（0,0）位于画板的左上端。translate（x，y）表示将坐标原点（0,0）移动到（x，y）的位置，后面的操作会认可这个新的远点位置。
3、save（）与restore（）；
save（）用于保存设置。
restore（）用于取出原先的保存设置。
例如：
最初我设置填充颜色为红色。现在我要应用绿色，我就把前面的填充颜色save（）保存起来，方便后面调用。绿色应用完后，我又要填充红色，直接
restore（）保存即可。