使用canvas怎么实现一个数字雨效果？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
效果图：
代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { margin: 0; padding: 0; } canvas { width: 100%; height: 100%; } </style> </head> <body> <canvas style="background:#111"></canvas> <script> //获取画布对象 var can = document.querySelector("canvas"); //获取画布的上下文 var ctx = can.getContext("2d"); //设置canvas的宽度和高度 can.width = window.innerWidth; can.height = window.innerHeight; //每个文字的字体大小 var fontSize = 16; //计算列 var colunms = Math.floor(window.innerWidth / fontSize); //记录每列文字的y轴坐标 var arr = []; //给每一个文字初始化一个起始点的位置 for (var i = 0; i < colunms; i++) { arr.push(0); } //运动的文字 var str = "you are a silly"; //绘画的函数 function draw() { //布满全屏的黑色遮罩层 ctx.fillStyle = "rgba(0,0,0,0.05)"; ctx.fillRect(0, 0, window.innerWidth, window.innerHeight); //给字体设置样式 ctx.font = "700 " + fontSize + "px 微软雅黑"; //给字体添加颜色 ctx.fillStyle = "#00cc33"; //写入画布中 for (var i = 0; i < colunms; i++) { var index = Math.floor(Math.random() * str.length); var x = i * fontSize; var y = arr[i] * fontSize; ctx.fillText(str[index], x, y); //如果文字的Y轴坐标大于画布的高度，1/100*colunms概率将该文字的Y轴坐标重置为0 if (y >= can.height && Math.random() > 0.99) { arr[i] = 0; } //文字Y轴坐标+1 arr[i]++; } } draw(); setInterval(draw, 30); </script> </body></html>看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注编程网行业资讯频道，感谢您对编程网的支持。
