html5学习-图像处理之添加杂色

今天学习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>
一个不敬业的前端攻城狮