文字粒子化(Canvas)

標籤：

文字粒子化,額或者叫小圓圈化... 
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5     <title></title> 6 </head> 7 <body> 8     <canvas id="particle" width="500" height="300"></canvas> 9     <script type="text/javascript">10         var canvas = document.getElementById("particle");11         var ctx = canvas.getContext("2d");12         var dots = [];//定義數組，用於存放後續的座標(x,y)13 14         function init() {15             ctx.beginPath();16             ctx.font = "80px Arial";17             ctx.fillStyle = "rgba(0,0,0,1)";18             ctx.fillText("Canvas",150,150);19             ctx.fill();//畫一個文字,顏色就隨意，a值盡量高點20             var img = ctx.getImageData(0, 0, canvas.width, canvas.height);//getImageData，專門用於擷取圖片資料，這裡直接取了整個Canvas21             ctx.clearRect(0, 0, canvas.width, canvas.height);//清空畫布，就是把之前的文字清空，因為後面要以粒子（應該叫小圓圈）代替22             for (var y = 0; y < img.height; y +=3) {//y+=3，是因為如果按像素取，有效值非常多，所以這裡就每隔3像素取一點23                 for (var x = 0; x < img.width; x +=3) {//y是高，x是寬24                     var i = (x + y * img.width)*4;//這邊就從左往右，從上往下；500X300的大小，會取166×100個像素點；×4則是因為rgba()25                     var dot = {26                         x: 0,27                         y: 028                     };29                     if (img.data[i + 3] >= 128) {//因為img.data中包含了每個像素點的rgba，＋3表示取a的值30                         dot.x = x;31                         dot.y = y;32                         dots.push(dot);//將每個滿足條件的xy Add到dots數組中33                     }34 35                 }36             }37 38             for (var m = 0; m < dots.length; m ++) {//遍曆數組，將每個數組的xy以圓的方式展出39                 //document.write(dots[m].x + "&nbsp;" + dots[m].y + "</br>");//瞄一瞄每個座標40                 ctx.beginPath();41                 ctx.arc(dots[m].x, dots[m].y, 1, 0, Math.PI * 2, true);42                 ctx.fill();43             }44         }45         window.onload = ("load", init(), true);46     </script>47 </body>48 </html>

 

文字粒子化(Canvas)