今天学习html5的图像处理：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 8 #can{ background:#EBEBEB} 9 10 </style> 11 12 </head> 13 <body> 14 <canvas id="can" width="800" height="600"></canvas> 15 <img src="images/2.jpg" style="display:none" /> 16 17 </body> 18 19 <script> 20 21 var canid=document.getElementById("can"); 22 var imgobj=document.getElementsByTagName("img")[0]; 23 var can=canid.getContext("2d"); 24 25 drawB(); 26 27 function drawB(num,srad,drad){ 28 can.drawImage(imgobj,0,0,200,250); 29 var sarr=[]; 30 31 32 var imgData=can.getImageData(0,0,200,250); 33 var imgDatas=can.createImageData(imgData); 34 35 var Parr=sjArr(); 36 37 for(var i=0;i<Parr.length;i++){ 38 39 imgData.data[4*Parr[i]+0]= parseInt(255*Math.random()); 40 imgData.data[4*Parr[i]+1]= parseInt(255*Math.random()); 41 imgData.data[4*Parr[i]+2]= parseInt(255*Math.random()); 42 imgData.data[4*Parr[i]+0]=255 43 } 44 can.putImageData(imgData,200,250) 45 //取得随机数 46 47 function sjArr(){ 48 var arr=[]; 49 var newArr=[] 50 for(var i=0;i<imgData.width*imgData.height;i++){ 51 52 arr.push(i); 53 } 54 for(var j=0;j<arr.length*20/100;j++){ 55 56 newArr.push(arr.splice(arr.length*Math.random(),1)); 57 58 59 } 60 61 return newArr; 62 63 } 64 65 66 } 67 68 </script> 69 70 71 </html>