1、操作对象：ImageData 对象，其实是canvas的像素点集合
2、主要操作： var obj=ctx.getImageData(0,0,100,100); ctx.putImageData(obj,110,0)
3、操作图片要放在站点才能正常操作，可以是本地站点可以是外部站点
4、属性有三个：宽、高、data
5、for循环给每一个像素点添加或者修改
6、不同的公式可以绘制任意奇妙的图形
像素操作
- 属性
- width 返回 ImageData 对象的宽度(可以理解为一行像素的个数)
- height 返回 ImageData 对象的高度(可以理解为一列像素的个数)
- data 返回一个对象，其包含指定的 ImageData 对象的图像数据
- 该对象包含每一个像素的四个rgba值，注意每个值都在0-255之间
- 这个四个参数和CSS中讲的rgba颜色表示法原理相同，四个参数分别表示红、绿、蓝以及透明度。
- 所不同的是这里的透明度取值也是0-255,255表示完全不透明，0表示完全透明
- 方法
- getImageData(x,y,w,h) 返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据
- putImageData(imgData,dx,dy,dirtyX,dirtyY,w,h) 把图像数据（从指定的 ImageData 对象）放回画布上
首先讨论第一种最简单的putImageData用法，即putImageData(imgData,dirtyX,dirtyY)，在解释其他参数
- imgData 规定要放回画布的 ImageData 对象。
- dx/dy ImageData 对象左上角的 x/y坐标，以像素计。即准备绘制图像的起点坐标.
-
[dirtyX,dirtyY,w,h]为一组可选参数，该参数确定了一个以dx和dy坐标原点的矩形，分别表示矩形的起点和宽高，该矩形把将要绘制的图像限定在矩形区域内.
温馨提示：如果用绘入外部图片的办法测试该属性，在本地测试会出错，这是由于javaScript的同源策略对context.getImageDate的影响，该策略是基于浏览器的安全，禁用会造成安全隐患。可以通过搭建一个本地站点，将文档放到站点的方法测试。对于这一点在本课程中不做过多讲解。
- createImageData() 创建新的、空白的 ImageData 对象
- var imgData=context.createImageData(width,height);以指定的尺寸（以像素计）创建新的 ImageData 对象
- var imgData=context.createImageData(imageData)创建与指定的另一个 ImageData 对象尺寸相同的新 ImageData 对象（不会复制图像数据）
代码
1 <!DOCTYPE html>
2 <html lang="zh-cn">
3 <head>
4 <meta charset="UTF-8">
5 <title>8-19 课堂演示</title>
6 </head>
7 <style type="text/css">
8 </style>
9 <body>
10 <canvas id="canvas" width="500" height="300" style="background: #A9A9A9">
11 很抱歉，您的浏览器暂不支持HTML5的canvas
12 </canvas>
13 <script>
14 var c=document.getElementById("canvas");
15 var ctx=c.getContext("2d");
16 ctx.fillStyle='rgba(255,55,5,0.6)'
17 ctx.fillRect(0,0,100,100)
18 var obj=ctx.getImageData(0,0,100,100);
19 // alert(obj.width)
20 // alert(obj.height)
21 // alert(obj.data.length)
22 //每一个像素包含四个颜色分量
23 // alert(obj.data[0])
24 // alert(obj.data[1])
25 // alert(obj.data[2])
26 // alert(obj.data[3])
27
28 ctx.putImageData(obj,110,0)
29 for (var i=0;i< obj.data.length; i++){
30 obj.data[0+4*i]=100;
31 obj.data[1+4*i]=20;
32 obj.data[2+4*i]=250;
33 obj.data[3+4*i]=255;
34 }
35
36 ctx.putImageData(obj,220,0)
37 for (var i=0;i< obj.data.length; i++) {
38 obj.data[0+4*i]=Math.floor(Math.random()*255)
39 obj.data[1+4*i]=Math.floor(Math.random()*255)
40 obj.data[