一、基本概述
1、canvas默认情况下的宽度是300px，高是150px，定义 宽高，应该再HTML中定义，而不应该在css中定义。
2、canvas使用的是W3C坐标系，y轴正方向向下。
二、直线绘制
1、一条直线
cxt.moveTo(x1,y1);cxt.lineTo(x2,y2);cxt.stroke();复制代码
说明：
- cxt为上下文环境对象context.
- moveTo()方法是将画笔移到(x1,y1)上，然后开始绘制，lineTo()方法是从（x1，y1）开始画直线，一直画到坐标（x2，y2），然后stroke()进行连线。
2、多条直线
cxt.moveTo(x1,y1);cxt.lineTo(x2,y2);cxt.lineTo(x2,y2);...cxt.stroke();复制代码
说明：
第二次的lineTo(),canvas会以上一次的lineTo坐标作为调用的起点，然后开始画。
三、矩形
1、描边矩形
cxt.strokeStyle = 属性值cxt.strokeRect(x,y,width,height);复制代码
说明
strokeStyle是context对象的一个属性，而strokeRect()是context对象的一个方法。
（1）strokeStyle属性有三种：颜色、渐变色、图案
cxt.strokeStyle = '#000';cxt.strokeStyle = 'red';cxt.strokeStyle = 'rgb(255,0,0)';cxt.strokeStyle = 'rgba(255,0,0,0.6)';复制代码
（2）strokeStyle属性必须在strokeRect()方法之前定义，否则strokeStyle无效。
2、填充矩形
cxt.fillStyle = 属性值cxt.fillRect(x,y,width,height);复制代码
说明：
fillStyle是context对象的一个属性，而fillRect()是context对象的一个方法。
（1）fillStyle属性有三种：颜色、渐变色、图案
cxt.fillStyle= '#000';cxt.fillStyle= 'red';cxt.fillStyle= 'rgb(255,0,0)';cxt.fillStyle= 'rgba(255,0,0,0.6)';复制代码
（2）fillStyle属性必须在fillRect()方法之前定义，否则fillStyle无效。
3、rect()方法
cxt.rect(x,y,width,height);复制代码
（1）rect()和stroke()
cxt.strokeStyle = 'red';cxt.rect(50,50,80,80);cxt.stroke();复制代码
等同于：
cxt.strokeStyle = 'red'cxt.strokeRect(50,50,80,80);复制代码
（2）rect()和fill()
cxt.fillStyle = 'red';cxt.rect(50,50,80,80);cxt.fill();复制代码
等同于：
cxt.fillStyle = 'red';cxt.fillRect(50,50,80,80);复制代码
使用rect()方法后，在调用stroke()和fill()方法，才能绘制出来。
4、清空矩形
cxt.clearRect(x,y,width,height)复制代码
一些函数封装的实例，可以参考