HTML5 文字粒子化

时间：2022-04-21 20:44:08
文字粒子化,额或者叫小圆圈化... 
1 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

 </head>

 <body>

     <canvas id="particle" width="500" height="300"></canvas>

     <script type="text/javascript">

         var canvas = document.getElementById("particle");

         var ctx = canvas.getContext("2d");

         var dots = [];//定义数组，用于存放后续的坐标(x,y)

         function init() {

             ctx.beginPath();

             ctx.font = "80px Arial";

             ctx.fillStyle = "rgba(0,0,0,1)";

             ctx.fillText("Canvas",150,150);

             ctx.fill();//画一个文字,颜色就随意，a值尽量高点

             var img = ctx.getImageData(0, 0, canvas.width, canvas.height);//getImageData，专门用于获取图片数据，这里直接取了整个Canvas

             ctx.clearRect(0, 0, canvas.width, canvas.height);//清空画布，就是把之前的文字清空，因为后面要以粒子（应该叫小圆圈）代替

             for (var y = 0; y < img.height; y +=3) {//y+=3，是因为如果按像素取，有效值非常多，所以这里就每隔3像素取一点

                 for (var x = 0; x < img.width; x +=3) {//y是高，x是宽

                     var i = (x + y * img.width)*4;//这边就从左往右，从上往下；500X300的大小，会取166×100个像素点；×4则是因为rgba()

                     var dot = {

                         x: 0,

                         y: 0

                     };

                     if (img.data[i + 3] >= 128) {//因为img.data中包含了每个像素点的rgba，＋3表示取a的值

                         dot.x = x;

                         dot.y = y;

                         dots.push(dot);//将每个满足条件的xy Add到dots数组中

                     }

                 }

             }

             for (var m = 0; m < dots.length; m ++) {//遍历数组，将每个数组的xy以圆的方式展出

                 //document.write(dots[m].x + "&nbsp;" + dots[m].y + "</br>");//瞄一瞄每个坐标

                 ctx.beginPath();

                 ctx.arc(dots[m].x, dots[m].y, 1, 0, Math.PI * 2, true);

                 ctx.fill();

             }

         }

         window.onload = ("load", init(), true);

     </script>

 </body>

 </html>

相关文章