一、Canvas是什么？
Canvas就是一个画布，可以进行画任何的线、图形、填充等一系列的操作，而且操作的画图的就是js，所以让js编程到了嗑药的地步。另外Canvas不仅仅提供简单的二维矢量绘图，也提供了三维的绘图，以及图片处理等一系列的api支持。

(1) 要使用Canvas来绘制图形必须在页面中添加Canvas的标签。

例如： <canvas id="demoCanvas" width="500" height="500"></canvas>

(2) 当然只有上面的标签，只能是创建好了一个画布，其中width和height属性就是设置画布的大小。Id属性也是必须的，后面要用Id来拿到当前的Canvas的Dom对象。通过此Canvas的Dom对象就可以获取他的上下文了，Canvas绘制图形都是靠着Canvas对象的上下文对象。

二、Canvas重要的Context对象

代码：

//第一步：获取canvas元素
var canvasDom = document.getElementById("demoCanvas");
//第二步：获取上下文
if(canvasDom .getContext){      //判断浏览器是否支持canvas
    //context是画布，getContext获取绘图上下文对象，也有名为WebGL的3d上下文
    var context = canvasDom .getContext("2d");    
    }

(3) Context上下文默认两种绘制方式：第一种：绘制线（stroke），第二种：填充：fill。

注意：决定了使用哪种方式之后，在填充或者绘制线之前先设置样式。

绘制矩形

context.fillStyle = "#0000ff";   //填充颜色
context.fillRect(10,10,70,70);   //填充矩形，xy宽高(像素)
context.lineWidth = 20;          //边框宽度
context.lineCap = "round";       //线条末端形状，butt平头，round圆头，square方头，
context.lineJoin = "round";      //线条交叉方式，round圆交，bevel斜交，miter斜接
context.strokeStyle = "red";     //描边颜色
context.strokeRect(50,50,50,50); //描边矩形
context.clearRect(50,50,20,20);  //清除一块矩形区域

绘制路径

context.beginPath();                      //创建路径
context.arc(200,100,20,0,2*Math.PI,false);//绘制圆参数：圆心坐标，半径，起始角度，是否顺时针。 
//arcTo绘制圆弧
context.moveTo(200,100);                  //移动绘图游标
context.lineTo(200,15);                   //绘制直线，从游标位置惠子直线到参数，
//bezierCurveTo绘制曲线，quadraticCurveTo绘制二次曲线，reac绘制矩形，
context.fillStyle = "rgba(0,0,0,1)"
context.stroke();                         //用strokeStyle描边
context.fill();                           //用fillStyle填充

绘制文本

context.font = "bold 14px Arial";   //设置文本样式，大小，字体
context.textAlign="center";         //文本对齐方式，start、end
context.textBaseline = "middle";    //上下对齐方式，top、middle、bottom
context.fillText("文本",200,15);     //fillText使用fillStyle，strokeText使用strokeStyle
context.globalAlpha =0.5;           //设置全局透明度
//context.save();                   //保存当前状态
context.translate(10,10);           //坐标平移，
//transform矩阵变换，setTransform先恢复默认再矩阵变换
context.rotate(1);                  //旋转角度，scale缩放比例，

渐变

createLinearGradient线性渐变、createRadialGradient辐射渐变

渐变线

context.moveTo(0,0);
context.lineTo(400,300);
var gnt1 = context.createLinearGradient(0,0,400,300);//线性渐变的起止坐标
gnt1.addColorStop(0,'red');               //创建渐变的开始颜色，0表示偏移量
gnt1.addColorStop(1,'yellow');            //创建渐变的结束颜色，1表示偏移量，一个渐变中可以写任意个渐变颜色
context.lineWidth=3;
context.strokeStyle = gnt1;
context.stroke();

渐变矩形

 var gnt1 = context.createLinearGradient(10,0,390,0);
 gnt1.addColorStop(0,'red');    //开始处颜色
 gnt1.addColorStop(0.5,'green');//中间处颜色
 gnt1.addColorStop(1,'blue');   //结尾处颜色
 context.fillStyle = gnt1;
 context.fillRect(10,10,380,280);

渐变圆

var gnt = context.createRadialGradient(200,300,50,200,200,200);
gnt.addColorStop(1,'red');
gnt.addColorStop(0,'green');
context.fillStyle = gnt;
context.fillRect(0,0,800,600);

这里需要说明的是createRadialGradient方法，参数有（Xstart,Ystart,radiusStart,XEnd,YEnd,radiusEnd），也就是说，它在实行渐变时，使用了两个圆，一个是原始的圆，一个是渐变式圆，其实，这种通过坐标与半径控制的方式可以实现很多样式，

drawImage绘制图像

var imageDom=document.getElementById("image"); 
context.drawImage(imageDom,10,10,20,20);   //起点为(10,10)，图像大小会变成20x20像素； 

shadowColor、shadowOffsetX、shadowOffsetY、shadowBlur阴影

context.shadowColor="rgba(0,0,0,0.5)" //设置阴影颜色 
context.shadowOffsetX=5; //设置形状或路径x轴方向的阴影偏移量，默认值为0； 
context.shadowOffsetY=5; //设置形状或路径y轴方向的阴影偏移量，默认值为0； 
context.shadowBlur=4;    //设置模糊的像素数，默认值为0，即不模糊。 
//绘制半透明的蓝色矩形 
context.fillStyle="rgba(0,0,255,1)"; 
context.fillRect(30,30,50,50); 

createPattern填充描边模式

var imageDom=document.images[0]; 
pattern=context.createPattern(imageDom,"repeat"); 
//repeat    默认。该模式在水平和垂直方向重复。
//repeat-x  该模式只在水平方向重复。
//repeat-y  该模式只在垂直方向重复。
//no-repeat 该模式只显示一次（不重复）。
context.fillStyle=pattern; 
context.fillRect(10,10,150,150); 

scale、translate、rotate图像变换

//缩放图像 
//scale(scaleX,scaleY):缩放图像，在x方向乘以scaleX，在y方向乘以scaleY。 
//scaleX和scaleY的默认值都是1.0 
context.scale(0.8,0.8); 

//变换原点 
//translate(x,y):将坐标原点移动到（x,y）。执行这个变换后，坐标(0,0)会变成之前由(x,y)表示的点 
context.translate(100,100); 

//旋转
//rotate(angle):围绕原点旋转图像angle弧度
context.rotate(1); 

toDataURL将canvas转化为图片数据

var imgurl = canvasDom.toDataURL("image/png");
var image = document.createElement("img");
image.src = imgurl;
hintdiv1.appendChild(image);