html5学习

阅读：评论：0

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&#ElementById("can");
22  var imgobj&#ElementsByTagName("img")[0];
23  var can&#Context("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&#ImageData(0,0,200,250);
33       var imgDatas&#ateImageData(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>

转载于:.html

本文发布于:2024-02-02 13:55:07，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170685330644246.html

上一篇：MTK界面设计中消除PNG图片的杂色背景

下一篇：图片逐渐出现杂色效果

标签：

留言与评论（共有 0 条评论）