JavaScript实现字符雨效果
更新时间：2022年06月19日 14:08:53 作者：福州-司马懿
这篇文章主要为大家详细介绍了JavaScript实现字符雨效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现字符雨效果的具体代码，供大家参考，具体内容如下
<html>
<head>
<meta charset="utf8"/>
<title>字符雨</title>
<style>
body {
color:white;
background-color:black;
overflow:hidden;
}
</style>
</head>
<body onresize="init()">
<div>
帧率(fps)：
<input id="fpsNum" type="number" min="1" max="35" step="2" value="24" />
<input id="switchBtn" type="button" value="stop" onclick="switchState()" />
</div>
<canvas id="canvas">您的浏览器不支持canvas</canvas>
<script>
var c = document.getElementById("canvas");
var fpsNum = document.getElementById("fpsNum");
var switchBtn = document.getElementById("switchBtn");
var ctx = c.getContext("2d");
//动画是否已经开始
var isStart = true;
//循环调用器id
var intervalId = 0;
//每次循环绘制一个0.1透明度的蒙版，让以前绘制的文字留下一段阴影效果
var clearColor = "rgba(0,0,0,.1)";
//文字大小
var fontSize = 20;
//文字
var font = fontSize + "px arial";
//文字颜色
var fontColor = "#0f0"
//存储每列的起始坐标
var drops = [];
//重启程序
function init() {
c.width = document.body.offsetWidth;
c.height = document.body.offsetHeight;
//文字的列数
var columns = Math.floor(c.width / fontSize);
//原来的列数
var len = drops.length;
if(len < columns) {
for(var i=len; i<columns; i++) {
//初始化随机的列坐标
drops.push(Math.floor(Math.random() * c.height));
}
} else {
drops.slice(columns, len - columns);
}
//如果当前已经正在绘制，则需要先终止绘制再重启绘制
if(isStart) {
switchState();
}
switchState();
}
//绘制
function draw() {
ctx.save();
ctx.translate(c.width, 0);
ctx.scale(-1, 1);
ctx.font = font;
ctx.fillStyle = fontColor;
drops.map(function(currentValue, index) {
//接受一个或多个unicode值，然后返回一个字符串
var text = String.fromCharCode(65 + Math.round(Math.random() * 33));
//var text = Math.floor(Math.random() * 2);
var x = index * fontSize;
var y = currentValue * fontSize;
ctx.fillText(text, x, y);
if(y > c.height * 0.6 && Math.random() > 0.85) {
drops[index] = 0;
}
drops[index]++;
});
ctx.restore();
ctx.fillStyle = clearColor;
ctx.fillRect(0, 0, c.width, c.height);
}
//切换当前状态(开始 或 停止)
function switchState() {
isStart = !isStart;
if(isStart) {
switchBtn.value = "stop";
intervalId = setInterval(draw, 1000/fpsNum.value);
} else {
switchBtn.value = "start";
clearInterval(intervalId);
}
}
init();
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
在很多系统模块里面，我们可能都需要进行一定的数据交换处理，这样可以很好的达到用户操作体验感，接下来通过本文给大家介绍基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理相关知识，非常具有参考价值，感兴趣的朋友一起学习吧2016-05-05
声明一个数值类型的变量我看到三种;我嘴角微微一笑：少年你还嫩了点，哪止三种，我知道的至少有五种,好奇的你可以参考下哈，希望本文可以帮助到你2013-02-02
这篇文章主要介绍了微信小程序实现列表的横向滑动，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-07-07
webstorm应该是目前最强的js编辑器了，结合sublime text可以很效率的开发项目。下面这篇文章主要给大家整理了一些Mac系统下Webstorm快捷键的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。2017-05-05
JavaScript可以对各种网页元素进行操控,下面这篇文章主要给大家介绍了关于JavaScript操作元素的相关资料,文中通过多个实例详细介绍了操作元素的方法，需要的朋友可以参考下2021-06-06
“锚点”功能在实际应用设计的好,可以提高用户体验,这篇文章主要给大家介绍了关于微信小程序实现锚点定位功能的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-07-07
Bootstrap让Web开发更迅速、更简单，这篇文章主要为大家详细介绍了Bootstrap表单控件，用来与用户做交流的一个网页控件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
JS为什么说async/await是generator的语法糖详解
这篇文章主要给大家介绍了关于JS为什么说async/await是generator的语法糖的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JS具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
这篇文章主要介绍了js获取元素外链样式的方法,分别在标准浏览器与IE浏览器两种情况下实现获取对应样式的功能,是非常实用的技巧,需要的朋友可以参考下2015-01-01
这篇文章主要给大家介绍了关于js中parseInt()诡异行为的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
最新评论