绘制方块
fillRect(L,T,W,H):填充出一个方块，默认颜色是黑色
strokeRect(L,T,W,H):画一个带边框的方块（空心方块），默认边框1像素，显示不一样
oGC.strokeRect(50.5,50.5,100,100);//这样写才会显示出是1个像素的
设置绘图
fillStyle：设置填充颜色,使用：oGC.fillStyle='blue';设置成蓝色
lineWidth：边线的宽度，这是一个数值，使用：oGC.lineWidth=10;边框为10像素
strokeStyle：边线的颜色，使用：oGC.strokeStyle='red';
代码示例：
var oC=document.getElementById('cl');//获取画布
var oGC=oC.getContext('2d');//获取绘图对象
oGC.fillStyle='blue';//填充颜色
oGC.lineWidth=10;//边线宽度
oGC.strokeStyle='red';//边线颜色
oGC.fillRect(50,50,100,100);//画实心方块
oGC.strokeRect(50.5,50.5,100,100);//画空心方块
显示效果：
!["图片1.png"/]("{#ZC_BLOG_HOST#}zb_users/upload/2018/03/201803081520499068291275.png" ""图片1.png"")
注意：填充和画边框的顺序不同显示效果也不同，谁写先就显示谁先，谁就在上边
!["图片2.png"/]("{#ZC_BLOG_HOST#}zb_users/upload/2018/03/201803081520499085204991.png" ""图片2.png"")
边界绘制
lineJoin：边界连接点样式（折角的样式）
——miter(默认)、round(圆角)、bevel(斜角)，使用：oGC.lineJoin='xxx';
!["图片3.png"/]("{#ZC_BLOG_HOST#}zb_users/upload/2018/03/201803081520499162628595.png" ""图片3.png"")!["图片4.png"/]("{#ZC_BLOG_HOST#}zb_users/upload/2018/03/201803081520499173642726.png" ""图片4.png"")!["图片5.png"/]("{#ZC_BLOG_HOST#}zb_users/upload/2018/03/201803081520499186421317.png" ""图片5.png"")
lineGap:端点样式
——butt(默认)、round(圆角)、square(高度多出宽度的一半)
!["图片6.png"/]("{#ZC_BLOG_HOST#}zb_users/upload/2018/03/201803081520499204849004.png" ""图片6.png"")!["图片7.png"/]("{#ZC_BLOG_HOST#}zb_users/upload/2018/03/201803081520499295919503.png" ""图片7.png"")!["图片8.png"/]("{#ZC_BLOG_HOST#}zb_users/upload/2018/03/201803081520499304513674.png" ""图片8.png"")
绘制路径（画线）
beginPath：开始绘制路径
closePath：结束绘制路径
moveTo：移动到绘制的新目标点
lineTo：新目标点，相当于线段终点
示例：
var oC=document.getElementById('cl');
var oGC=oC.getContext('2d');//获取绘图对象
oGC.beginPath();//开始绘制路径
oGC.moveTo(100, 100);//移动到绘制的新目标点
oGC.lineTo(200, 200);//新目标点，相当于线段终点
oGC.closePath();//结束绘制路径
/\*画多个的时候要有开始和闭合加以区分\*/
oGC.stroke();//进行绘制
/ \*要有这条语句才会出现线段\*/
效果：
!["图片9.png"/]("{#ZC_BLOG_HOST#}zb_users/upload/2018/03/201803081520499323471049.png" ""图片9.png"")
绘制路径（多种绘制）
stroke:画线，默认黑色
fill:填充，默认黑色
rect(L,T,W,H):矩形区域
clearRect(L,T,W,H):删除一个画布的矩形区域
save:保存路径
restore:恢复路径
\*这两个用来封闭代码段的，比如设置样式的时候
代码示例：
var oC=document.getElementById('cl');
var oGC=oC.getContext('2d');//获取绘图对象
oGC.save();//保存路径
oGC.fillStyle='red';//设置填充样式
oGC.beginPath();//开始绘制路径
oGC.moveTo(100, 100);//移动到绘制的新目标点
oGC.lineTo(200, 200);//新目标点，相当于线段终点
oGC.lineTo(300, 200);
oGC.closePath();//结束绘制路径
oGC.fill();//填充绘制
oGC.restore();
//上边设置的样式只对封闭起来的那个三角形起作用
oGC.beginPath();//开始绘制路径
oGC.moveTo(100, 200);//移动到绘制的新目标点
oGC.lineTo(200, 300);//新目标点，相当于线段终点
oGC.lineTo(300, 300);
oGC.closePath();//结束绘制路径
oGC.fill();//填充绘制
效果：
!["图片10.png"/]("{#ZC_BLOG_HOST#}zb_users/upload/2018/03/201803081520499337239137.png" ""图片10.png"")
绘制圆形
arc(x,y,半径,起始弧度，结束弧度，绘制旋转的方向)
——x,y ：圆心的位置
——弧度与角度的关系：弧度=角度\*Math.PI/180
——旋转方向：顺时针（默认：false）、逆时针（true）
示例：
var oC=document.getElementById('cl');
var oGC=oC.getContext('2d');//获取绘图对象
oGC.arc(200,200,150,0,360\*Math.PI/180,false);
oGC.stroke();
效果：
!["图片11.png"/]("{#ZC_BLOG_HOST#}zb_users/upload/2018/03/201803081520499353355167.png" ""图片11.png"")
绘制其他曲线
arcTo(x1,y1,x2,y2,r)
——第一坐标、第二坐标、半径。
示例：
var oC=document.getElementById('cl');
var oGC=oC.getContext('2d');//获取绘图对象
oGC.moveTo(100,200);
oGC.arcTo(100,100,200,100,50);
oGC.stroke();
效果：
!["图片12.png"/]("{#ZC_BLOG_HOST#}zb_users/upload/2018/03/201803081520499369312049.png" ""图片12.png"")
图解：
!["图片13.png"/]("{#ZC_BLOG_HOST#}zb_users/upload/2018/03/201803081520499387729226.png" ""图片13.png"")
quadraticCurveTo(dx,dy,x1,y1)
——贝塞尔曲线，第一组控制点，第二组结束坐标。
示例：
var oC=document.getElementById('cl');
var oGC=oC.getContext('2d');//获取绘图对象
oGC.moveTo(100,200);
oGC.quadraticCurveTo(100,100,200,100);
oGC.stroke();
效果：
!["图片14.png"/]("{#ZC_BLOG_HOST#}zb_users/upload/2018/03/201803081520499402276791.png" ""图片14.png"")
图解：
!["图片15.png"/]("{#ZC_BLOG_HOST#}zb_users/upload/2018/03/201803081520499418213734.png" ""图片15.png"")
控制点dx,dy起到一个牵引作用，使曲线向其靠拢。
bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)
——贝塞尔曲线：第一组控制点，第二组控制点，第三组结束坐标
示例：
var oC=document.getElementById('cl');
var oGC=oC.getContext('2d');//获取绘图对象
oGC.moveTo(100,200);
oGC.bezierCurveTo(100,100,200,100,100,200);
oGC.stroke();
效果：
!["图片16.png"/]("{#ZC_BLOG_HOST#}zb_users/upload/2018/03/201803081520499433428312.png" ""图片16.png"")
图解：
!["图片17.png"/]("{#ZC_BLOG_HOST#}zb_users/upload/2018/03/201803081520499448339405.png" ""图片17.png"")
变换
translate
——偏移，从起始点为基准点，移动到当前坐标位置。
示例：
var oC=document.getElementById('cl');
var oGC=oC.getContext('2d');//获取绘图对象
oGC.translate(100,100);
oGC.fillRect(0,0,100,100);
效果：
!["图片18.png"/]("{#ZC_BLOG_HOST#}zb_users/upload/2018/03/201803081520499461297396.png" ""图片18.png"")
rotate
——旋转，参数为弧度
示例：
var oC=document.getElementById('cl');
var oGC=oC.getContext('2d');//获取绘图对象
oGC.translate(100,100);
oGC.rotate(45\*Math.PI/180);
oGC.fillRect(0,0,100,100);
效果：
!["图片19.png"/]("{#ZC_BLOG_HOST#}zb_users/upload/2018/03/201803081520499483728910.png" ""图片19.png"")
\*以方块左上角原点旋转
scale
——缩放，参数为原来小方块的长宽倍数，为两个数值
示例：旋转加缩放的小方块
插入图片
——等图片加载完，在执行canvas操作
—图片预加载：在onload方法中调用
drawImage(oImg,x,y,W,H)
—oImg：当前图片，x,y：坐标，W,H：宽高
示例：
var oC=document.getElementById('cl');
var oGC=oC.getContext('2d');
var oImg=new Image();
oImg.src="1.jpg";
oImg.onload= function () {
oGC.drawImage(this,0,0,400,400);
};
设置背景
createPattern(oImg,平铺方式)
——参数2为：repeat、repea-x、repea-y、no-repeat
示例：
var bg=oGC.createPattern(obj,'repeat');
oGC.fillStyle=bg;
oGC.fillRect(0,0,300,300);
渐变
createLinearGradient(x1,y1,x2,y2)：线性渐变
——第一组参数：起点坐标，第二组参数：终点坐标
——addColorStop(位置，颜色) 添加渐变的颜色
示例：
var oC=document.getElementById('cl');
var oGC=oC.getContext('2d');
//线性渐变
var obj=oGC.createLinearGradient(150,100,150,200);
obj.addColorStop(0,'red');
obj.addColorStop(0.5,'yellow');
obj.addColorStop(1,'blue');
oGC.fillStyle=obj;
oGC.fillRect(150,100,100,100);
效果：
!["图片20.png"/]("{#ZC_BLOG_HOST#}zb_users/upload/2018/03/201803081520499496154352.png" ""图片20.png"")
createRadialGradient(x1,y1,r1,x2,y2,r2)
——放射性渐变
——参数：第一个圆的圆心坐标和半径，第二个圆的圆心坐标和半径
示例：
var oC=document.getElementById('cl');
var oGC=oC.getContext('2d');
var obj=oGC.createRadialGradient(200,200,100,200,200,200);
obj.addColorStop(0,'red');
obj.addColorStop(0.5,'yellow');
obj.addColorStop(1,'blue');
oGC.fillStyle=obj;
oGC.fillRect(0,0,oC.width,oC.height);
效果：
!["图片21.png"/]("{#ZC_BLOG_HOST#}zb_users/upload/2018/03/201803081520499506591639.png" ""图片21.png"")