在前面一篇文章中，我们通过css的方式实现了红包照片的模糊效果和偷窥镜。
但是通过demo发现，效果并不是特别好，尤其是移动设备上的 动画性能实在无法接受。
也可以通过canvas来实现相同的效果，本篇先来了解一下canvas的使用。
一、canvas基础
1、canvas本质
a.标签；
b.画布；
2、基本使用
var canvas = document.getElementById('canvas_id'); //获取canvas
canvas.height = document.documentElement.clientWidth; //设置宽高
canvas.width = document.documentElement.clientHeight;
var context = canvas.getContext('2d'); //获取2d绘图context
context.beginPath();
...... //绘图路径
context.closePath();
context.fillStyle = ‘red'; //填充样式，描边样式使用strokeStyle
context.fill(); // 填充绘图，描边绘图使用stroke()
3、基础API（路径）
context.moveTo(x,y) // 确定起点
context.lineTo(x,y) // 绘制线段
context.fillRect(x,y,width,height) // 填充矩形
context.strokeRect(x,y,width,height) // 描边矩形
// 绘制圆弧，参数包含圆心坐标/半径/起止弧度点/弧度行进方向
context.arc(x, y, radius, starAngle,endAngle, anticlockwise)
context.clearRect(x,y,width,height) //清除画布某矩形区域
// 贝塞尔曲线
context.quadraticCurveTo(qcpx,qcpy,qx,qy)
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
// 渐变，起始点以及偏移点点颜色
var lGradient = context.createLinearGradient(xStart,yStart,xEnd,yEnd) // 线性
var rGradient = context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd) // 径向
*Gradient.addColorStop(offset,color)
context.translate(x,y) // 平移
context.scale(x,y) // 缩放
context.rotate(angle) // 旋转
// 备注：以上三个变化操作的不是绘图，而是坐标轴
context.globalCompositeOperation=type //图形组合
/* type：
source-over（默认值）:在原有图形上绘制新图形
destination-over:在原有图形下绘制新图形
source-in:显示原有图形和新图形的交集，新图形在上，所以颜色为新图形的颜色
destination-in:显示原有图形和新图形的交集，原有图形在上，所以颜色为原有图形的颜色
source-out:只显示新图形非交集部分
destination-out:只显示原有图形非交集部分
source-atop:显示原有图形和交集部分，新图形在上，所以交集部分的颜色为新图形的颜色
destination-atop:显示新图形和交集部分，新图形在下，所以交集部分的颜色为原有图形的颜色
lighter:原有图形和新图形都显示，交集部分做颜色叠加
xor:重叠部分不显示
copy:只显示新图形
*/
// 阴影
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowColor = 'rgba(100,100,100,0.5)';
context.shadowBlur = 1.5;
// 绘制文字
context.fillText(text,x,y)
context.strokeText(text,x,y)
// 画笔画布状态暂存
context.save()
context.restore()
context.drawImage // 绘图——下面单独介绍
二、绘图api相关
1、api介绍
context.drawImage(image, x, y, w, h) // Image对象、起始坐标、绘制宽高（可省略）
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)// 将Image的sx、sy位置sw、sh大小的图像绘制再画布dx、dy位置dw、dh大小的地方
context.fillStyle ＝ context.createPattern(image,type)
/* type: no-repeat:不平铺
repeat-x:横方向平铺
repeat-y:纵方向平铺
repeat:全方向平铺 */
context.clip() // 设置绘制的封闭区域
// imagedata中每4个元素代表一个像素的rgba数据，对应图像从左到右从上到下的像素
var imagedata=context.getImageData(sx,sy,sw,sh)
context.putImageData(imagedata,dx,dy,dirtyX,dirtyY,dirtyWidth,dirtyHeight)
2、上帝绘图模式
由于可以获取到图片每个像素的数据，包括rgba，可以通过改变任何像素的值为任何值来达到预期的效果。（just like the God）
那么我们究竟可以做些什么呢？
一般情况下，可以通过像素色彩的计算实现PS中一些比较简单的滤镜效果，例如灰度图片只需要对单个像素的rgb值做加权平均就可以了，红色图片只需要把每个像素的r值设置为255即可。
下面详细介绍几种简单的算法。
三、滤镜算法
1、灰度
// 一般采用加权平均值，权值可以任意选取，常用 0.3、0.59、0.11;
r ＝ g = b = r * rWeight + g * gWeight + b * bWeight;
// 也可以使用其他的一些技巧，例如MAX
r ＝ g = b = Math.max(r, g, b);
2、灰度加强
r =(2*g - b + r)* r / 255;
g =(2*b - g + r)* r / 255;
b =(2*b - g + r)* g / 255;
... //再做灰度处理
3、反色——底片效果
r ＝ 255 - r;
g = 255 - g;
b = 255 - b;
4、黑白
var temp ＝ r * rWeight + g * gWeight + b * bWeight; // 可以采用灰度中的多种方式
r ＝ g = b = temp > 128 ? 255 : 0; // 这里的取值也可以灵活处理，达到不同的黑白灰的效果
5、斑驳
r ＝ r > 128 ? 255 : 0;
g ＝ g > 128 ? 255 : 0;
b ＝ b > 128 ? 255 : 0;
6、怀旧
r = r * 0.393 + g * 0.769 + b * 0.189;
g = r * 0.349 + g * 0.686 + b * 0.168;
b = r * 0.272 + g * 0.534 + b * 0.131;
7、色彩通道——纯色通道
// 纯色比较简单，包括一些单色通道和混合通道
r ＝ 255; // 红色
r= g = 255; // 黄色（红＋绿）
r ＝ 0；// 反红色，有别于（绿＋蓝）
// 这种方式比较灵活，可以通过调整rgb为任意常数值，来实现一些特别的效果
8、锐化
// rgb的值均加上当前位置的颜色值与四面八方颜色值的差为当前值
function getColor(color) {
color[i][j] *= 10;
for (var row = -1; row < 2; row++) {
for (var col = -1; col < 2; col++) {
color[i][j] -= color[i + row][j + col];
}
}
}
9、马赛克
// 某个方块中所有像素的值取同一个位置的值
for (var i=0; i< Height; i++) {
for (var j=0; j<Width; j++) {
var iTemp = i - i % RADUIS;
var jTemp = j - j % RADUIS;
r[i * Width + j] = r[iTemp * Width + jTemp];
g[i * Width + j] = g[iTemp * Width + jTemp];
b[i * Width + j] = b[iTemp * Width + jTemp];
}
}
10、模糊
// 每个像素的值均取周围像素值的平均值
for (var i=0; i< Height; i++) {
for (var j=0; j<Width; j++) {
color[i * Width + j] = getColor(i, j);
}
}
function getColor(i, j) {
var result = 0, count = 0;
for (var m = i - RADUIS;m < i + RADUIS; m++) {
if (m < 0) { continue; }
for(var n = j - RADUIS; n < j + RADUIS; n++) {
if (n < 0) { continue; }
result += data[m * width + n];
count++;
}
}
return result/count;
}
11、浮雕
// 相邻点的差值做类似半灰度的处理
for (var i=0; i< Height; i++) {
for (var j=0;j<Width;j++) {
r[i* Width + j] = r[(i* Width + j) ＋ 1] - r[i* Width + j] + 128;
g[i* Width + j] = g[(i* Width + j) ＋ 1] - g[i* Width + j] +128;
b[i* Width + j] = b[(i* Width + j) ＋ 1] - b[i* Width + j] +128;
... //再做灰度处理（可能会有一些彩色的线条，可以通过灰度处理去掉）
}
}
四、滤镜示例
Just Load：http://tkixp9.github.io/redbag/draw_image_as_god.html 。
五、canvas实现红包照片
TO BE CONTINUED...
