文字粒子化,额或者叫小圆圈化...
1 <!DOCTYPE html> 2 <html ="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 + " " + 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>
原标题：HTML5 Canvas文字粒子化
关键词：HTML
我知道了 