你的位置:首页 > 网页设计

[网页设计]HTML5 Canvas文字粒子化


文字粒子化,额或者叫小圆圈化... 
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 + "&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>