js中canvas操作

*  1.canvas元素是HTML5元素ie9+支持
*  2.使用canvas绘图需要指定绘图区域大小,canvas有width和height属性,
*  不要使用css来指定大小
*  3.绘图操作方案:
*    1.获取canvas元素:var draw=document.getElementById("drawingArea");
*    2.获取2d上下文:var context=draw.getContext("2d");
*    3.开始绘图
*  4.canvas可以导出图像:
*      var imgUrl=draw.toDataUrl("image/png") (参数是图像的MIME类型)
*      使用图像:
*          var img=document.createElement("img");
*          img.src=imgUrl;
*          将img添加到文档流
*  5.绘图函数:
*      1.设置画笔颜色:
*          context.fillStyle="red":填充的时候的画笔颜色
*          context.strokeStyle="red":描边的时候画笔颜色
*      2.绘制图形:
*          (在使用描边的方法stroke类的方法的时候可以设置线条的宽度,末端形状,线条相交方式
*             lineWidth:设置线条宽度
*             lineCap:设置末端形状("butt:平头","round:圆头","square:方头")),只有在画线的时候能看出来
*             lineJoin:设置线条相交方式("round:圆交","bevel:斜交","miter:斜接")(我没看出什么区别)
*          1.绘制矩形
*              1.绘制矩形:context.strokeRect(x,y,width,height)
*              2.填充矩形:context.fillRect(x,y,width,height)
*              3.清除矩形:context.clearRect(x,y,width,height)
*              (e.g:context.fillRect(10,10,50,50);)
*
*          2.绘制路径:
*              1.arc(x,y,半径,起始角,结束角,画圆的方向(true为逆时针))
*              2.arcTo(x1,y1,x2,y2,半径)(使用这个方法的时候需要一个起始点)
*                 (这个方法是个很神奇的方法,表示很难理解)
*              3.moveTo(x,y)将绘图点移到(x,y),不创建路径
*              4.lineTo(x,y)从上次的点移动到(x,y)
*              5.rect(x,y,width,height)创建矩形路径
*              6.bezierCurveTo(x1,y1,x2,y2,x,y)从一点开始到x,y结束绘制一条曲线,x1,y1,x2,y2
*                  是控制点(就是曲线经过(x1,y1)(x2,y2)来形成不一样的弧度)
*              7.quadraticCurveTo(x1,y1,x,y)从一点开始到x,y结束绘制一条曲线x1,y1
*                  是控制点(就是曲线经过(x1,y1)来形成弧度)
*              (开始创建路径前需要调用函数context.beginPath(),之后才能调用以上方法
*              可以不闭合路径,如果闭合路径就是将头和尾相连,在绘制路径的结束需要将其
*              画出来,需要调用context.stroke()或者context.fill()方法)
*
*          3.绘制文本:
*              1.context.strokeText()
*              2.context.fillText()
*              3.context.font:设置文本字体(和css的font一样)
*              4.context.textAlign:文本对齐方式("start","end","left","right","center")
*              5.context.Baseline:文本基线("top","hanging","middle","alphabetic","ideographic","bottom")
*
*          4.变换:
*              1.rotate(角度)旋转(这个旋转是指将画布旋转,要想出现旋转的效果需要先旋转在绘图,什么时候旋转,
*              其后面的绘图才会出现旋转效果)(默认是在以(0,0)为原点旋转)
*              2.scale(x,y)横向缩放x倍,纵向缩放y倍(同上需要先调用再绘图)
*              3.translate(x,y)将原点移动到x,y
*              4.transform(水平缩放倍数,水平倾斜度数,垂直倾斜度数,垂直缩放倍数,水平位移距离,垂直位移距离)
*              5.setTransform(水平缩放倍数,水平倾斜度数,垂直倾斜度数,垂直缩放倍数,水平位移距离,垂直位移距离)先重置在执行transform
*
*          5.绘制图像:
*              1.获取图像:获取文档图像,或者创建图像
*              2.context.drawImage(img,x坐标,y坐标)将图像绘制到画板上,从(x,y)开始
*              或者context.drawImage(img,x,y,width,height)绘制出来的图像大小为width*height
*              或者context.drawImage(img,原图像x,原图像y,原图像width,原图像height,目标图像x,目标图像y,目标图像width,目标图像height)
*              (就是从原图像的(x,y)截取长width,宽height绘制到画板上(x,y)坐标,大小(w,h))
*
*          6.绘制阴影:
*              1.shadowColor:设置阴影颜色
*              2.shadowOffsetX:设置阴影x方向偏移
*              3.shadowOffsetY:设置阴影y方向偏移
*              4.shadowBlur:设置阴影的模糊度
*
*          7.渐变:
*              1.线性家变:
*                  1.获取渐变对象:var gradient=context.createLinearGradient(开始渐变x,开始渐变y,结束渐变x,结束渐变y);
*                  2.设置渐变色:gradient.addColorStop(0,color1);
*                          gradient.addColorStop(1,color2);
*                          (渐变色从0到1,颜色从color1到color2,当然中间还可以加0.2..)
*                  3.将填充色改为渐变色:context.fillStyle=gradient;
*                  4.开始绘制
*              2.放射渐变:
*                  1.获取渐变对象:var gradient=context.createLinearGradient(开始x,开始y,开始半径,结束x,结束y,结束半径);
*                  2.设置渐变色:gradient.addColorStop(0,color1);
*                          gradient.addColorStop(1,color2);
*                          (渐变色从0到1,颜色从color1到color2,当然中间还可以加0.2..)
*                  3.将填充色改为渐变色:context.fillStyle=gradient;
*                  4.开始绘制
*
*          8.模式:
*              这和图片的平不平铺类似
*              1.获取图像
*              2.创建模式var pattern=context.createPattern(img,模式)("repeat","repeat-x","repeat-y","no-repeat")
*              3.设置填充样式为pattern:context.fillStyle=pattern
*              4.绘制图像
*
*          9.使用图像数据(canvas中最牛逼的技术):
*              1.获取图像数据:var imgData=context.getImageData(x,y,width,height);
*              2.imgData这个对象有三个属性:width,height,data
*                width:就是截取的图像的宽度
*                height:就是截取的图像的高度
*                data:保存着图像的每个像素的值(red,green,blue,alpha)
*                data中每个像素占用data数组的4位,分别为
*                第一个像素的信息：
*                  data[0]:红色
*                  data[1]:绿色
*                  data[3]:蓝色
*                  data[4]:透明度
*                  (三原色和透明度的值在0-255)
*                第二个像素从data[5]开始依次往后
*              可以据此来对图像的颜色进行编辑
*
*          10.合成:
*              1.globalAlpha:设置全局透明度
*              2.context.globalCompositeOperation:设置叠加方式
*