canvas绘图

1.绘制图像

context.drawImage(image,x,y,width,height)

context.drawImage(originx,originy,originwidth,originheight,目标图像x坐标，目标图像y坐标，目标图像宽度，目标图像高度）

2.渐变

var gradient = context.createLinearGradient(起点x坐标，起点Y坐标，终点x坐标，终点y坐标）

gradient.addColorStop(0,"white")

gradient.addColorStop(1,"black")

context.fillStyle = gradient；

context.createRadialGradient(起点圆心x坐标，起点圆心y坐标，起点圆半径，终点圆圆心x坐标，终点圆圆心y坐标，终点圆半径）下面同上

3.模式

var pattern = context.createPattern(image,"repeat")

context.fillStyle = pattern;

context.fillRect(20,20,30,30);

4.使用图像数据

var imageData = context.getImageData(x,y,width,height)

imageData有三个属性，Width，height，data,data是数组，每一个像素用四个元素来保存，分别表示红、绿、蓝和透明度值，四个元素值都介于0-255（包括0,255）

5.合成

透明度 context.globalAlpha=n(n为0-1之间的数）

后绘制图像与前绘制图像结合 context.globalCompositeOperation=""