像素操作

像素的基本操作

1. getImageData(x,y,width,height)方法用来获取一张图片的像素数据，x、y表示所选图片区域左上角的横纵坐标，width、height表示所选区域的宽高
2. getImageData方法返回一个对象canvasPixelArray，该对象有一个data属性，该属性中存储的事图片像素数据的数组：[r1,g1,b1,a1,r2,g2,b2,a2……]，data.length表示一张图片的像素总量
3. putImageData(image,x,y)输出一张图片的像素数据，image是canvasPixelArray对象，x,y表示重新绘制图形的左上角的横纵坐标

反转效果

实现：将红绿蓝三个通道的像素取各自的相反值

计算方法：255-原值

代码：

for (var i = 0; i < data.length; i += 4) { 
    data[i + 0] = 255 - data[i + 0];
    data[i + 1] = 255 - data[i + 1]; 
    data[i + 2] = 255 - data[i + 2]; 
}
复制代码

黑白效果（灰度图）

实现：取红绿蓝三个通道的平均值，然后将红绿蓝三个通道的值全部设置为这个平均值

代码：

for (var i = 0; i < data.length; i += 4){ 
var average = (data[i + 0] + data[i + 1] + data[i + 2] + data[i + 3]) / 3;
    data[i + 0] = average; //红
    data[i + 1] = average; //绿
    data[i + 2] = average; //蓝
}
复制代码

加权计算平均值

亮度效果

实现：将红绿蓝三个通道值，分别同时加上一个正值或者负值

代码：

for (var i = 0; i < data.length; i += 4) { 
    var a = 50; 
    data[i + 0] += a; 
    data[i + 1] += a; 
    data[i + 2] += a; 
}
复制代码

复古效果

实现：分别取红绿蓝三个通道的某种加权平均值

代码：

for (var i = 0; i < data.length; i += 4){ 
    var r = data[i + 0]; 
    var g = data[i + 1]; 
    var b = data[i + 2]; 
    data[i + 0] = r * 0.39 + g * 0.76 + b * 0.18; 
    data[i + 1] = r * 0.35 + g * 0.68 + b * 0.16; 
    data[i + 2] = r * 0.27 + g * 0.53 + b * 0.13;
}
复制代码

权值是随便取的

红色蒙版

实现：将红色通道的值设置为红绿蓝三个通道的平均值，将绿蓝两色通道的值设置为0

代码：

for (var i = 0; i < data.length; i += 4) { 
    var r = data[i + 0]; 
    var g = data[i + 1]; 
    var b = data[i + 2]; 
    var average = (r + g + b) / 3; 
    data[i + 0] = average; 
    data[i + 1] = 0; 
    data[i + 2] = 0; 
}
复制代码

类似的可以实现绿色蒙版和蓝色蒙版

透明处理

实现：将像素数组中每个像素的透明度乘以n

代码：

for (var i = 0; i < data.length; i += 4){ 
    data[i + 3] = data[i + 3]*n; 
}
复制代码

createImageData()

1. 该方法用于在画布中创建一个区域，我们可以对这个区域进行像素操作，如果没有像素区域，我们是无法进行像素操作的
2. 方法的两种用法

createImageData(sw,sh)：接收两个参数，就是要创建的区域的宽度和高度

createImageData(imageData)：接收一个参数，表示要创建的区域的宽度和高度与这个像素对象的宽度和高度相等

渐变与阴影

在Canvas中渐变分为两种：线性渐变和径向渐变

线性渐变 createLinearGradient()方法和addColorStop()方法

var gnt = cxt.createLinearGradient(x1, y1, x2, y2);
gnt.addColorStop(value1,color1);
gnt.addColorStop(value2,color2);
cxt.fillStyle = gnt;
cxt.fill();
复制代码

实现线性渐变的步骤：

1. 调用createLinearGradient()方法创建一个linearGradient对象，并赋值给变量
2. 调用linearGradient对象的addColorStop()方法n次；第一次表示渐变开始时的颜色；第二次表示渐变结束时的颜色，第三次则以第二次渐变结束时的颜色作为开始进行颜色渐变，以此类推。
3. 把linearGradient对象赋值给fillStyle属性，并且调用fill方法来绘制带有渐变色的图案

gnt.addColorStop(value1,color1);
gnt.addColorStop(value2,color2);
复制代码

value表示渐变位置的偏移量，取值为0-1，value1表示开始位置，value2表示结束位置；参数color表示渐变颜色，取值为颜色值

在线性渐变中，fill可以改为fillRect()活着fillText()。其中fillRect表示图形渐变，fillText表示文字渐变。

径向渐变 createRadialGradient()方法和addColorStop()方法

径向渐变是一种颜色从内向外进行的圆形渐变，径向渐变是圆形活着椭圆形渐变，颜色不在乎沿着一条直线渐变，而是从一个起点向所有方向渐变

var gnt = cxt.createRadialGradient(x1,y1,r1,x2,y2,r2);
gnt.addColorStop(value1,color1);
gnt.addColorStop(value2,color2);
cxt.fillStyle = gnt;
cxt.fill();
复制代码

在Canvas中，想要实现径向渐变，需要以下3步：

1. 调用createLinearGradient()方法创建一个radialGradient对象，并赋值给变量gnt；
2. 调用radialGradient对象（即gnt）的addColorStop()方法N次，第1次表示渐变开始的颜色，第2次表示渐变结束时的颜色。然后第3次则以第2次渐变颜色作为开始颜色，进行渐变，以此类推。
3. 把radialGradient对象（即gnt）赋值给fillStyle属性，并且调用fill()方法来绘制有渐变色的图形；

阴影

Canvas阴影属性使用的也是W3C坐标系