createRadialGradient()方法的参数是(x0,y0,r0,x1,y1,r1)，其中x0 渐变的开始圆的 x 坐标，y0 渐变的开始圆的 y 坐标，r0 开始圆的半径，x1 渐变的结束圆的 x 坐标，y1 渐变的结束圆的 y 坐标，r1 结束圆的半径。

var grd=ctx.createRadialGradient(75,50,5,90,60,100);  

grd.addColorStop(0,"red");  

grd.addColorStop(1,"white");   

ctx.fillStyle=grd;  

ctx.fillRect(10,10,150,100);

（6）设置阴影

我们还可以设置阴影

ctx.shadowOffsetX = 10; // 设置水平位移  

ctx.shadowOffsetY = 10; // 设置垂直位移  

ctx.shadowBlur = 5; // 设置模糊度  

ctx.shadowColor = "rgba(0,0,0,0.5)"; // 设置阴影颜色   

ctx.fillStyle = "#CC0000";   

ctx.fillRect(10,10,200,100);

（7）合成

globalAlpha 属性设置或返回绘图的当前透明值（alpha 或 transparency）。

globalAlpha 属性值必须是介于 0.0（完全透明） 与 1.0（不透明） 之间的数字。

ctx.globalAlpha = number

globalCompositeOperation属性设置或返回如何将一个源（新的）图像绘制到目标（已有的）的图像上。

源图像 = 您打算放置到画布上的绘图。

目标图像 = 您已经放置在画布上的绘图。

source-over 默认。在目标图像上显示源图像。  

source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。  

source-in 在目标图像中显示源图像。只有目标图像之内的源图像部分会显示，目标图像是透明的。  

source-out 在目标图像之外显示源图像。只有目标图像之外的源图像部分会显示，目标图像是透明的。  

destination-over 在源图像上显示目标图像。  

destination-atop 在源图像顶部显示目标图像。目标图像位于源图像之外的部分是不可见的。  

destination-in 在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示，源图像是透明的。  

destination-out 在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示，源图像是透明的。  

lighter 显示源图像 + 目标图像。  

copy 显示源图像。忽略目标图像。  

xor 使用异或操作对源图像与目标图像进行组合。

2.2 绘制图像

Canvas API 允许将图像文件插入画布。

我们可以使用Image对象来加载图片，然后绘制：

var image = new Image();

image.onload = function(){

    ctx.drawImage(image,0,0);

};

image.src='new.jpg';

drawImage方法

drawImage(img,x,y)

drawImage(img,x,y,width,height)

drawImage(img,sx,sy,switch,sheight,x,y,width,height)

参数：

img 规定要使用的图像、画布或视频；sx 可选，开始剪切的 x 坐标位置；sy 可选，开始剪切的 y 坐标位置；swidth 可选，被剪切图像的宽度；sheight 可选，被剪切图像的高度；x 表示在画布上放置图像的 x 坐标位置；y 在画布上放置图像的 y 坐标位置；width 可选，表示要使用的图像的宽度（伸展或缩小图像）；height 可选，表示要使用的图像的高度（伸展或缩小图像）。

图像平铺

createPattern(image,type)

参数：

 type: no-repeat:不平铺 ；repeat-x:横方向平铺；repeat-y:纵方向平铺；repeat:全方向平铺

2.3 像素处理

通过getImageData方法和putImageData方法，可以处理每个像素，进而操作图像内容。

getImageData()方法可以用来读取Canvas的内容，返回一个对象，包含了每个像素的信息。

var imageData = ctx.getImageData(x,y,w,h)

参数：x是canvas的X轴坐标，y是canvas的Y轴坐标，w是宽度，h是高度。

getImageData()方法返回一个像素颜色数组（该数组的长度等于图像的像素宽度*图像的像素高度*4，每个值的范围是0-255，可读写），imageData的属性data就是指向它，顺序是所取像素范围的从左到右，从上到下，数组的元素是（所有图形，包括图片，和绘制的图形）每个像素的rgba  :

[r1,g1,b1,a1,r2,g2,b2,a2...]

putImageData()方法可将数组内容重新绘制到Canvas上。

putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);