canvas实现数字雨效果
程序员文章站
2024-03-18 17:54:34
...
效果展示：
源码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数字雨</title>
</head>
<body>
<canvas style="border: 1px solid #000;">更新浏览器</canvas>
<script>
var can = document.querySelector("canvas");
var ctx = can.getContext("2d");
can.width = 1500;
can.height = 700;
var canWidth = can.width;
var canHeight = can.height;
//定义一个渐变色
var gl = ctx.createLinearGradient(0, 0, canWidth, canHeight);
gl.addColorStop(0, 'red');
// gl.addColorStop(.25,'green');
gl.addColorStop(.5, 'yellow');
// gl.addColorStop(.75,'blue');
gl.addColorStop(1, 'cyan');
// 1 获取随机内容
var str = '0123456789zxcvbnmasdfghjklqwertyuiop';
// 2 设置基本通体 样式
var fontSize = 16;
ctx.font = fontSize + "px '宋体'";
// 3 设置画的列数
var column = canWidth / fontSize;
// 4 创建一个数组用来存放每一列的数据 并且给数组的每一列设置初始值 （用来存放每一列自己的效果）
var arr = [];
for (var i = 0; i < column; i++) {
arr[i] = 0;
}
// 业务逻辑 不一定相等 因为有可能 column是个小数
// console.log( arr.length);
// console.log(column );
// console.log(column == arr.length);
// 5定时器开始跑数字
setInterval(draw, 50);
// draw 方法的作用 绘制数字雨
function draw() {
//设置样式 填充样式
ctx.fillStyle = "rgba(0,0,0,0.07)";
//绘制满屏填充效果
ctx.fillRect(0, 0, canWidth, canHeight);
// 设置每行的文本内容 一行写多少那？？？ 就是那个列数
// ctx.fillStyle = "#0f0";
ctx.fillStyle = gl;
// for(var a = 0; a<column;a++){ //能行不？？？？？ 但是里不严谨的情况下可以一样但是那 建议是用arr.length
for (var a = 0; a < arr.length; a++) {
ctx.fillText(str[Math.floor(Math.random() * str.length)], fontSize * a, fontSize * arr[a]);
arr[a]++;
//自己列数的状态自己判断 不在整体判断 && 后面表示随机掉落概率的判断
if (arr[a] * fontSize > canHeight && Math.random() > 0.9) {
arr[a] = 0;
}
}
// 给每一个字 设置颜色 就需要在for 中设置 但是要注意一定要设置颜色前在添加个beginPath（） 不然颜色会显示最后一个
// ？？ 这个最后颜色指的是谁？？？
}
</script>
</body>
</html>