一.像素的概念
我们在电脑或者电视上能看到色彩斑斓的图像，其实这些图像都是由一个一个像素点构成的，那么就首先要知道什么
是像素以及什么是颜色。
在内存中，每个像素点由4字节构成，这4个字节的代表的含义如下：
（1）第一个字节决定像素的红色值
（2）第二个字节决定像素的绿色值
（3）第三个字节决定像素的蓝色值
（4）第四个字节决定像素的透明度值
上述每一个字节的取值是从0到255，比如（255,0,0,255），在内存中是用二进制表示，即它是一个32位的串：
11111111 00000000 00000000 11111111
0代表完全透明，255代表完全不透明。
那么为什么要用红绿蓝来表示呢？因为红绿蓝是三基色，自然界的大多数颜色都是通过它们的不同比例混合而成。
二.像素的设置
在HTML5至今都没有提供直接操作像素点的方法，但是我们也有办法，就是利用ImageData对象。
ImageData对象用来保存图像的像素值，它有3个重要的属性，分别是width，height，data。data属性是一
个连续的数组，实际上一张图像的所有像素值都保存在data数组里面的，例如：
ID.data[index*4 + 0]
ID.data[index*4 + 1]
ID.data[index*4 + 2]
ID.data[index*4 + 3]
上面取出了data数组中连续相邻的4个值，分别代表第index+1（因为数组从0开始）个像素的红色，绿色，蓝色和透明度值，这张图像中一共有width*height个像素，而data数组中共保存了4*width*height个值。
上下文Context有3个方法来创建，读取和设置ImageData对象，分别是：
createImageData(width,height); 在内存中创建一个指定大小的ImageData对象。
getImageData(x,y,width,height); 返回一个ImageData对象，包含了指定区域的像素数组。
putImageData(data,x,y); 把ImageData对象绘制到屏幕指定的区域上。
下面就以一个简单的例子来展示它们的用法（IE10支持）
image.html
<!DOCTYPE html>
<html>
<head>
<title>ImageData_example</title>
<head>
<body>
<canvas id="canvas" width="800" height="600" style="background-image:url(image.jpg)">
你的浏览器不支持canvas标签！
</canvas>
<br>
红色：<input type="range" min="1" max="100" οnchange="changeColor(event, 0)" /><br>
绿色：<input type="range" min="1" max="100" οnchange="changeColor(event, 1)" /><br>
蓝色：<input type="range" min="1" max="100" οnchange="changeColor(event, 2)" /><br>
透明：<input type="range" min="1" max="100" οnchange="changeColor(event, 3)" /><br>
<script src="image.js">
</script>
</body>
</html>image.js
var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d');
var width = parseInt(canvas.getAttribute('width'));
var height = parseInt(canvas.getAttribute('height'));
var image = new Image();
image.onload = imageLoaded;
image.src = "image.jpg";
//保存图像像素
var imageData = null;
function imageLoaded(){
//将图像滑到画布上
cxt.drawImage(image, 0, 0);
//取图像的像素数组
imageData = cxt.getImageData(0, 0, width, height);
}
function changeColor(event, offset){
imageLoaded();
for(var y = 0; y < imageData.height; y++){
for(var x = 0; x < imageData.width; x++){
var index = y * imageData.width + x;
//一个像素占4字节，p为当前指针的位置
var p = index * 4;
var color = imageData.data[p + offset] * event.target.value / 50;
color = Math.min(color, 255);
//将改变后的颜色存进数组
imageData.data[p + offset] = color;
}
}
//输出到屏幕
cxt.putImageData(imageData, 0, 0);
}
绘制随机像素点
rand-pixel.html
<!DOCTYPE html>
<html>
<head>
<title>ImageData_example</title>
<head>
<body>
<canvas id="canvas" width="500" height="400" style="background-color:black">
你的浏览器不支持canvas标签！
</canvas>
<br>
<input type="button" value="随机画点" οnclick="interval=setInterval(randomPixel, 1);" /><br>
<input type="button" value="停止" οnclick="clearInterval(interval);" /><br>
<input type="button" value="清除" οnclick="clearCanvas();" /><br>
<script src="rand-pixel.js">
</script>
</body>
</html>rand-pixel.js
var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d');
var width = parseInt(canvas.getAttribute('width'));
var height = parseInt(canvas.getAttribute('height'));
//保存图像像素
var imageData = cxt.createImageData(width, height);
function randomPixel(){
var x = parseInt(Math.random() * width);
var y = parseInt(Math.random() * width);
var index = y * width + x;
var p = 4 * index;
imageData.data[p + 0] = parseInt(Math.random() * 256);
imageData.data[p + 1] = parseInt(Math.random() * 256);
imageData.data[p + 2] = parseInt(Math.random() * 256);
imageData.data[p + 3] = parseInt(Math.random() * 256);
cxt.putImageData(imageData, 0, 0);
}
function clearCanvas(){
cxt.clearRect(0, 0, width, height);
imageData = cxt.createImageData(width, height);
}
