文字粒子化,额或者叫小圆圈化...
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，专门用于获取图片数据，这里直接取了整个Canvas 21 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: 0 28 }; 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 + " " + 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>