<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ background:black;} #c1{ background:white;} </style> <script> window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); oGC.fillRect(0,0,100,100);//绘制黑色方块 var oImg = oGC.getImageData(0,0,100,100);//获取图像的像素 alert( oImg.width ); //一行的像素个数100 alert( oImg.height ); //一列的像素个数100 alert( oImg.data.length ); //整体像素的数组集合40000，每个像素占4个位置。 alert( oImg.data[0] ); //0 - 255 黑色到白色 0 alert( oImg.data[1] ); //0 - 255 黑色到白色 0 alert( oImg.data[2] ); //0 - 255 黑色到白色 0 alert( oImg.data[3] ); //0 - 255 透明到不透明 255 for(var i=0;i<oImg.width*oImg.height;i++){ oImg.data[4*i] = 255; oImg.data[4*i+1] = 0; oImg.data[4*i+2] = 0; oImg.data[4*i+3] = 100; } oGC.putImageData(oImg,100,100);//设置新的像素数据 }; </script> </head> <body> <canvas id="c1" width="400" height="400"></canvas> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ background:black;} #c1{ background:white;} </style> <script> window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); var oImg = oGC.createImageData(100,100); for(var i=0;i<oImg.width*oImg.height;i++){ oImg.data[4*i] = 255; oImg.data[4*i+1] = 0; oImg.data[4*i+2] = 0; oImg.data[4*i+3] = 100; } oGC.putImageData(oImg,100,100);//创建新的像素集合 }; </script> </head> <body> <canvas id="c1" width="400" height="400"></canvas> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ background:black; color:white; font-size:30px;} #c1{ background:white;} </style> <script> window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); var aLi = document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ aLi[i].onclick = function(){ var str = this.innerHTML; var h = 180; oGC.clearRect(0,0,oC.width,oC.height); oGC.font = h + 'px impact'; oGC.textBaseline = 'top'; oGC.fillStyle = 'red'; var w = oGC.measureText(str).width; oGC.fillText(str,(oC.width - w)/2,(oC.height - h)/2); var oImg = oGC.getImageData((oC.width - w)/2,(oC.height - h)/2,w,h); oGC.clearRect(0,0,oC.width,oC.height); var arr = randomArr(w*h,w*h/10); var newImg = oGC.createImageData(w,h); for(var i=0;i<arr.length;i++){ newImg.data[4*arr[i]] = oImg.data[4*arr[i]]; newImg.data[4*arr[i]+1] = oImg.data[4*arr[i]+1]; newImg.data[4*arr[i]+2] = oImg.data[4*arr[i]+2]; newImg.data[4*arr[i]+3] = oImg.data[4*arr[i]+3]; } oGC.putImageData(newImg,(oC.width - w)/2,(oC.height - h)/2); }; } function randomArr(iAll,iNow){ var arr = []; var newArr = []; for(var i=0;i<iAll;i++){ arr.push(i); } for(var i=0;i<iNow;i++){ newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) ); } return newArr; } }; </script> </head> <body> <canvas id="c1" width="400" height="400"></canvas> <ul style="float:left;"> <li>妙</li> <li>味</li> <li>课</li> <li>堂</li> </ul> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ background:black; color:white; font-size:30px;} #c1{ background:white;} </style> <script> window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); var aLi = document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ aLi[i].onclick = function(){ var str = this.innerHTML; var h = 180; var timer = null; clearInterval(timer); var iNow = 0; oGC.clearRect(0,0,oC.width,oC.height); oGC.font = h + 'px impact'; oGC.textBaseline = 'top'; oGC.fillStyle = 'red'; var w = oGC.measureText(str).width; oGC.fillText(str,(oC.width - w)/2,(oC.height - h)/2); var oImg = oGC.getImageData((oC.width - w)/2,(oC.height - h)/2,w,h); oGC.clearRect(0,0,oC.width,oC.height); var arr = randomArr(w*h,w*h/10); var newImg = oGC.createImageData(w,h); timer = setInterval(function(){ for(var i=0;i<arr[iNow].length;i++){ newImg.data[4*arr[iNow][i]] = oImg.data[4*arr[iNow][i]]; newImg.data[4*arr[iNow][i]+1] = oImg.data[4*arr[iNow][i]+1]; newImg.data[4*arr[iNow][i]+2] = oImg.data[4*arr[iNow][i]+2]; newImg.data[4*arr[iNow][i]+3] = oImg.data[4*arr[iNow][i]+3]; } oGC.putImageData(newImg,(oC.width - w)/2,(oC.height - h)/2); if(iNow == 9){ iNow = 0; clearInterval(timer); } else{ iNow++; } },200); }; } function randomArr(iAll,iNow){ var arr = []; var allArr = []; for(var i=0;i<iAll;i++){ arr.push(i); } for(var j=0;j<iAll/iNow;j++){ var newArr = []; for(var i=0;i<iNow;i++){ newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) ); } allArr.push(newArr); } return allArr; } }; </script> </head> <body> <canvas id="c1" width="400" height="400"></canvas> <ul style="float:left;"> <li>妙</li> <li>味</li> <li>课</li> <li>堂</li> </ul> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ background:black; color:white; font-size:30px;} #c1{ background:white;} </style> <script> window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); oGC.fillRect(0,0,100,100); var oImg = oGC.getImageData(0,0,100,100); alert( getXY(oImg,3,5) ); setXY( oImg,3,5,[255,0,0,255] ); for(var i=0;i<oImg.width;i++){ setXY( oImg,i,5,[255,0,0,255] ); } oGC.putImageData(oImg,100,100); function getXY(obj,x,y){ //针对一行一列进行操作 var w = obj.width; var h = obj.height; var d = obj.data; var color = []; color[0] = d[4*(y*w+x)]; color[1] = d[4*(y*w+x)+1]; color[2] = d[4*(y*w+x)+2]; color[3] = d[4*(y*w+x)+3]; return color; } function setXY(obj,x,y,color){ var w = obj.width; var h = obj.height; var d = obj.data; d[4*(y*w+x)] = color[0]; d[4*(y*w+x)+1] = color[1]; d[4*(y*w+x)+2] = color[2]; d[4*(y*w+x)+3] = color[3]; } }; </script> </head> <body> <canvas id="c1" width="400" height="400"></canvas> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ background:black; color:white; font-size:30px;} #c1{ background:white;} </style> <script> window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); var yImg = new Image(); yImg.onload = function(){ draw(this); }; yImg.src = '2.png'; function draw(obj){ oC.width = obj.width; oGC.drawImage(obj,0,0); var oImg = oGC.getImageData(0,0,obj.width,obj.height); var w = oImg.width; var h = oImg.height; for(var i=0;i<h;i++){ for(var j=0;j<w;j++){ var result = []; var color = getXY(oImg,j,i); result[0] = 255 - color[0];//反色 result[1] = 255 - color[1]; result[2] = 255 - color[2]; result[3] = 255; setXY(oImg,j,i,result); } } oGC.putImageData(oImg,0,obj.height); } function getXY(obj,x,y){ //针对一行一列进行操作 var w = obj.width; var h = obj.height; var d = obj.data; var color = []; color[0] = d[4*(y*w+x)]; color[1] = d[4*(y*w+x)+1]; color[2] = d[4*(y*w+x)+2]; color[3] = d[4*(y*w+x)+3]; return color; } function setXY(obj,x,y,color){ var w = obj.width; var h = obj.height; var d = obj.data; d[4*(y*w+x)] = color[0]; d[4*(y*w+x)+1] = color[1]; d[4*(y*w+x)+2] = color[2]; d[4*(y*w+x)+3] = color[3]; } }; </script> </head> <body> <canvas id="c1" width="400" height="400"></canvas> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ background:black; color:white; font-size:30px;} #c1{ background:white;} </style> <script> window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); var yImg = new Image(); yImg.onload = function(){ draw(this); }; yImg.src = '2.png'; function draw(obj){ oC.width = obj.width; oGC.drawImage(obj,0,0); var oImg = oGC.getImageData(0,0,obj.width,obj.height); var w = oImg.width; var h = oImg.height; var newImg = oGC.createImageData(obj.width,obj.height); for(var i=0;i<h;i++){ for(var j=0;j<w;j++){ var result = []; var color = getXY(oImg,j,i); result[0] = 255 - color[0]; result[1] = 255 - color[1]; result[2] = 255 - color[2]; result[3] = 255; setXY(newImg,j,h-i,result); } } oGC.putImageData(newImg,0,obj.height); } function getXY(obj,x,y){ //针对一行一列进行操作 var w = obj.width; var h = obj.height; var d = obj.data; var color = []; color[0] = d[4*(y*w+x)]; color[1] = d[4*(y*w+x)+1]; color[2] = d[4*(y*w+x)+2]; color[3] = d[4*(y*w+x)+3]; return color; } function setXY(obj,x,y,color){ var w = obj.width; var h = obj.height; var d = obj.data; d[4*(y*w+x)] = color[0]; d[4*(y*w+x)+1] = color[1]; d[4*(y*w+x)+2] = color[2]; d[4*(y*w+x)+3] = color[3]; } }; </script> </head> <body> <canvas id="c1" width="400" height="400"></canvas> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ background:black; color:white; font-size:30px;} #c1{ background:white;} </style> <script> window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); var yImg = new Image(); yImg.onload = function(){ draw(this); }; yImg.src = '2.png'; function draw(obj){ oC.width = obj.width; oGC.drawImage(obj,0,0); var oImg = oGC.getImageData(0,0,obj.width,obj.height); var w = oImg.width; var h = oImg.height; var newImg = oGC.createImageData(obj.width,obj.height); for(var i=0;i<h;i++){ for(var j=0;j<w;j++){ var result = []; var color = getXY(oImg,j,i); result[0] = 255 - color[0]; result[1] = 255 - color[1]; result[2] = 255 - color[2]; result[3] = 255*i/h; setXY(newImg,j,h-i,result); } } oGC.putImageData(newImg,0,obj.height); } function getXY(obj,x,y){ //针对一行一列进行操作 var w = obj.width; var h = obj.height; var d = obj.data; var color = []; color[0] = d[4*(y*w+x)]; color[1] = d[4*(y*w+x)+1]; color[2] = d[4*(y*w+x)+2]; color[3] = d[4*(y*w+x)+3]; return color; } function setXY(obj,x,y,color){ var w = obj.width; var h = obj.height; var d = obj.data; d[4*(y*w+x)] = color[0]; d[4*(y*w+x)+1] = color[1]; d[4*(y*w+x)+2] = color[2]; d[4*(y*w+x)+3] = color[3]; } }; </script> </head> <body> <canvas id="c1" width="400" height="400"></canvas> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ background:black; color:white; font-size:30px;} #c1{ background:white;} </style> <script> window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); var yImg = new Image(); yImg.onload = function(){ draw(this); }; yImg.src = '2.jpg'; function draw(obj){ oC.width = obj.width; oC.height = obj.height*2; oGC.drawImage(obj,0,0); var oImg = oGC.getImageData(0,0,obj.width,obj.height); var w = oImg.width; var h = oImg.height; var num = 5; var newImg = oGC.createImageData(obj.width,obj.height); var stepW = w/num; var stepH = h/num; for(var i=0;i<stepH;i++){ for(var j=0;j<stepW;j++){ var color = getXY(oImg,j*num+Math.floor(Math.random()*num),i*num+Math.floor(Math.random()*num)); for(var k=0;k<num;k++){ for(var l=0;l<num;l++){ setXY(newImg,j*num+l,i*num+k,color); } } } } oGC.putImageData(newImg,0,obj.height); } function getXY(obj,x,y){ //针对一行一列进行操作 var w = obj.width; var h = obj.height; var d = obj.data; var color = []; color[0] = d[4*(y*w+x)]; color[1] = d[4*(y*w+x)+1]; color[2] = d[4*(y*w+x)+2]; color[3] = d[4*(y*w+x)+3]; return color; } function setXY(obj,x,y,color){ var w = obj.width; var h = obj.height; var d = obj.data; d[4*(y*w+x)] = color[0]; d[4*(y*w+x)+1] = color[1]; d[4*(y*w+x)+2] = color[2]; d[4*(y*w+x)+3] = color[3]; } }; </script> </head> <body> <canvas id="c1" width="400" height="400"></canvas> </body> </html>