canvas绘制基础讲解

图形的组合方式

context.globalCompositeOperation = type;

type方式

(1)source-in

 （2）source-out

(3)destination-over

 (4)destination-in

(5)destination-out

(6)destination-atop

 

(7)lighter

(8)copy

 图片的处理

像素 

（1）获取像素

getImageData(x,y,width,height)

返回值是一个对象obj，里边有一个属性data是一个数组，用来保存像素值，值得注意的是这个方法得在服务器环境下使用

（2）输出像素：putImageData（obj，x，y）

（3）常用效果

反色   255-x

灰度

newr = (r * 0.272) + (g * 0.534) + (b * 0.131);
newg = (r * 0.349) + (g * 0.686) + (b * 0.168);
newb = (r * 0.393) + (g * 0.769) + (b * 0.189);


(r + g + b)/3

浮雕 

1.用相邻点的RGB值减去当前点的RGB值并加上128作为新的RGB值

2.由于图片中相邻点的颜色值是比较相近的，因此这样的算法处理之后，只有颜色的边沿区域

3.也就是相邻颜色差异较大的部分才会比较明显，而其他平滑区域值则接近128左右

4.也就是灰色，这就具有了浮雕效果

5.在实际的效果中，这样处理后，有些区域可能还是会有“彩色”的一些点或者条状痕迹，所以最好在对新的RGB值做一个灰度处理

毛玻璃

原理：用当前点四周一定范围内任意一点的颜色来替代当前点颜色，最常用的是随机的采用相邻点进行替代。

熔铸效果

算法及原理：

r = r * 128 / (g + b +1);

g = g * 128 / (r + b + 1);

b = b * 128 / (g + r +1);

 冰冻效果

算法及原理：

r = (r -g -b) * 3 / 2;

g = (g - r -b) * 3 / 2;

b = (b - g -r) * 3 / 2;

 context.drawImage

 drawImage(image,x,y)     起点（x，y）开始绘制

drawImage(image,x,y,width,height)    起点（x，y）大小（width，height）

drawImage（image，sourceX，sourceY，sourceWidth，sourceHeight，x，y，width，height）

绘制到canvas中  起点（x，y）  大小（width，height）

先在图片中切割出一个区域（sourceX，sourceY，sourceWidth，sourceHeight）

 

 案例示范：

黑白

反色

 灰度