canvas上的像素操作(图像复制，细调)
总结
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[2+4*i]=Math.floor(Math.random()*255) 41 obj.data[3+4*i]=Math.floor(Math.random()*255) 42 } 43 ctx.putImageData(obj,330,0) 44 45 for (var i=0;i< obj.data.length; i++) { 46 var rad=Math.floor(Math.random()*255) 47 obj.data[0+4*i]=rad 48 obj.data[1+4*i]=rad 49 obj.data[2+4*i]=rad 50 obj.data[3+4*i]=rad 51 } 52 ctx.putImageData(obj,330,150) 53 54 55 </script> 56 57 </body> 58 </html>
操作图片
放在站点才能正常操作
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>8-21 课堂演示</title> 6 </head> 7 <style type="text/css"> 8 </style> 9 <body> 10 <canvas id="canvas" width="900" height="300" style="background: #A9A9A9"> 11 很抱歉，您的浏览器暂不支持HTML5的canvas 12 </canvas> 13 <input type="button" value="像素操作" onclick="putImage()"> 14 <input type="button" value="反色绘制" onclick="fs()"> 15 <input id="ljxg" type="button" value="滤镜效果" onclick="lj()"> 16 <script> 17 var c=document.getElementById("canvas"); 18 var ctx=c.getContext("2d"); 19 var img=new Image(); 20 img.onload=function(){ 21 ctx.drawImage(img,0,0,400,300) 22 } 23 img.src='../img/p3.jpg' 24 function putImage() { 25 var imgData=ctx.getImageData(0,0,400,300) //用getImageData函数从画板上取得像素数据 26 //ctx.putImageData(imgData,500,0) //将所取得的整个像素数据画到Canvas画板上 27 //将所取得的像素数据的一部分画到Canvas画板上。 28 //ctx.putImageData(imgData,500,0,150,0,130,300) 29 //ctx.putImageData(imgData,500,0,300,0,130,300) 30 ctx.putImageData(imgData,500,0,0,0,130,300) 31 } 32 33 //反色绘制 34 function fs(){ 35 ctx.clearRect(500,0,400,300) 36 var imgData=ctx.getImageData(0,0,400,300) 37 for (var i=0;i<imgData.data.length ; i+=4) { 38 imgData.data[i+0]=255-imgData.data[i+0]; 39 imgData.data[i+1]=255-imgData.data[i+1] 40 imgData.data[i+2]=255-imgData.data[i+2] 41 } 42 ctx.putImageData(imgData,500,0) 43 } 44 45 //滤镜效果 46 function lj(){ 47 ctx.clearRect(500,0,400,300) 48 var imgData=ctx.getImageData(0,0,400,300) 49 for (var i=0;i<imgData.data.length ; i+=4) { 50 imgData.data[i+0]=0; 51 //imgData.data[i+1]=0; 52 // imgData.data[i+2]=0; 53 } 54 ctx.putImageData(imgData,500,0) 55 } 56 </script> 57 58 </body> 59 </html>
绘制背景
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>8-22 课堂演示</title> 6 </head> 7 <style type="text/css"> 8 </style> 9 <body> 10 <canvas id="canvas" width="900" 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 var imgData=ctx.createImageData(300,300); 17 for (var i=0;i<imgData.data.length;i+=4){ 18 var g=i*i*i*3%255 19 imgData.data[i+0]=g; 20 imgData.data[i+1]=g; 21 imgData.data[i+2]=g; 22 imgData.data[i+3]=255; 23 } 24 ctx.putImageData(imgData,0,0); 25 26 for (var i=0;i<imgData.data.length;i+=4) 27 { 28 g=Math.floor((i*i+4*i+30)%255) 29 imgData.data[i+0]=g; 30 imgData.data[i+1]=g; 31 imgData.data[i+2]=255; 32 imgData.data[i+3]=255; 33 } 34 ctx.putImageData(imgData,300,0); 35 36 for (var i=0;i<imgData.data.length;i+=4) 37 { 38 g=Math.floor(Math.sqrt(i*i*5)%255) 39 imgData.data[i+0]=200; 40 imgData.data[i+1]=g; 41 imgData.data[i+2]=g; 42 imgData.data[i+3]=255; 43 } 44 ctx.putImageData(imgData,600,0); 45 </script> 46 47 </body> 48 </html>