canvas处理图片

canvas绘制图片的三种方法：

　　drawImage(image, x, y)

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

　　drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,destX, destY, destWidth, destHeight)

参数：

　　image：所要绘制的图像。这必须是表示 <img> 标记或者屏幕外图像的 Image 对象，或者是 Canvas 元素

　　x,y：要绘制的图像的左上角的位置。

　　width，height：图像所应该绘制的尺寸。指定这些参数使得图像可以缩放

　　sourceX,sourceY: 图像将要被绘制的区域的左上角。这些整数参数用图像像素来度量 （图片要裁剪的起始位置）

　　sourceWidth, sourceHeight:图像所要绘制区域的大小，用图像像素表示 （图片要裁剪的大小）

　　destX, destY：所要绘制的图像区域的左上角的画布坐标 （图片插入的位置）

　　destWidth, destHeight：图像区域所要绘制的画布大小　　（图片要绘制的大小） 

对canvas绘制的图片处理：

1、复制画布上指定的矩形的像素数据

　　var imageDatas = ctx.getImageData(x, y, width, height);

　　参数：

　　　　x,y：复制的左上角位置的 x、y 坐标。

　　　　width,heigth：将要复制的矩形区域的宽度、高度

2、获取指定矩形区域的rgba

　　var dataArray = imageDatas.data;

3、通过for循环对每个像素点设置新的rgba

　　如反色：255 减去 r g b 现在的值

　　灰色处理（r g b等值）：可以将现在的 r g b 加起来除以3再分别赋值

　　透明度：设置dataArray[i + 3]的值即可

4、图像数据放回画布上

　　ctx.putImageData(imageDatas,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

　　参数：

　　　　imageDatas：放回画布的 imageDatas对象

　　　　x,y：要绘制的图像的左上角的位置　　　　

　　　　dirtyX,dirtyY（可选）：在画布上放置图像的位置

　　　　dirtyWidth,dirtyHeight（可选）：在画布上绘制图像所使用的宽度、高度。

如下为设置透明度的代码：

　　var imageDatas = ctx.getImageData(0, 0, 450, 450);　　　　//复制画布上指定的矩形的像素数据
　　var dataArray = imageDatas.data;　　　　　　　　　　　　　　 //获取矩形区域的 rgba，范围均是（0-255）
    for (var i = 0 ; i < dataArray.length ; i += 4) {　　　　
        var r = dataArray[i];　　　　　　　　　　　　　　　　　　//设置新的 rgba
        var g = dataArray[i+1];
        var b = dataArray[i+2];
        var a = dataArray[i + 3];　　　　　　　　　　　　　　　 //此处代表图片的透明度（透明度也是 0-255）
        dataArray[i] = r;　　　　　　　　　　　　　　　　　　　　//赋予矩形区域新的 rgba 值
        dataArray[i + 1] = g;
        dataArray[i + 2] = b;        
        dataArray[i + 3] = a * 0.2; 
    }
　　 ctx.putImageData(imageDatas, 0, 0);