星空网 > 软件开发 > 网页设计

文字粒子化(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>

 




原标题:文字粒子化(Canvas)

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

汉堡港董事会同意 MSC 收购协议:https://www.kjdsnews.com/a/1660028.html
热度飙升2500%,日售844单,老外爱上中国篝火盖:https://www.kjdsnews.com/a/1660029.html
12 款Top电子邮件营销软件:https://www.kjdsnews.com/a/1660030.html
收藏|亚马逊人不得不知道的合规事项:https://www.kjdsnews.com/a/1660031.html
中东noon电商平台-如何维护店铺的评价?:https://www.kjdsnews.com/a/1660032.html
数据回暖:有平台连降六个月终回升!10月东南亚Lazada、Shopee等各大电商平台数据一览~:https://www.kjdsnews.com/a/1660033.html
跨境支付百科——巴西支付篇:https://www.kjdsnews.com/a/1836648.html
大福地快捷酒店预订 大福酒店怎么走:https://www.vstour.cn/a/365187.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流