文字粒子化,额或者叫小圆圈化... 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>
时间： 2024-10-08 08:13:50