一、理解颜色
我们在电脑屏幕上可以看到色彩斑斓的图像，其实这些图像都是由一个个像素点组成的。那么像素是什么？颜色又是什么呢？（如果您提出这两个问题，您一定是个热爱思考的人）一个像素其实对应着内存中的一组连续的二进制位，由于是二进制位，每个位上的取值当然只能是 0 或者 1 了！这样，这组连续的二进制位就可以由 0 ，1 排列组合出很多种情况，而每一种排列组合就决定了这个像素的一种颜色。先看看下面这幅图
声明：为本文为原创文章，作者保留所有权利！欢迎转载，转载请注明作者左洸和出处博客园
我们可以看到这幅图描述了六个像素点，一共由24个小方框组成。
注意：图中的一个小方框代表一个字节，即8个二进制位。
因此，每个像素点由四个字节组成。图中也分别标出了这四个字节代表的含义：
第一个字节决定像素的红色值
第二个字节决定像素的绿色值
第三个字节决定像素的蓝色值
第四个字节决定像素的透明度值
每一种分颜色值的大小是从 0 到 255（提问：为什么只能到255？） ，透明度的取值：0 代表完全透明，255代表完全不透明
这样，我们就可以用（255，0，0，255）来表示一个纯红色像素
在内存中，他是这样的一个32位的串： 11111111 00000000 00000000 11111111
二、操作像素
了解了颜色和像素的实质，我们就可以对图形进行更加复杂的处理。
可是，HTML5 目前还没有提供类似 setPixel 或者 getPixel 这样直接操作像素点的方法， 但是我们也有办法
就是使用 ImageData 对象：
ImageData对象用来保存图像像素值，它有 width、height和 data 三个属性，其中 data 属性就是一个连续数组，图像的所有像素值其实是保存在 data 里面的。
data 属性保存像素值的方法和我们在前面图片中看到的一模一样：
imageData.data[index*4 +0]
imageData.data[index*4 +1]
imageData.data[index*4 +2]
imageData.data[index*4 +3]
上面取出了 data 数组中连续相邻的四个值，这四个值分别代表了图像中第 index+1 个像素的红色、绿色、蓝色和透明度值的大小。
注意：index 从0 开始，图像中总共有 width * height 个像素，数组中总共保存了 width * height * 4 个数值
上下文对象 Context 有三个方法用来创建、读取和设置 ImageData 对象，他们分别是
