JavaScript|JavaScript canvas实现字符雨效果 JavaScriptcanvas实现字符雨效果

本文实例为大家分享了JavaScript canvas实现字符雨效果的具体代码，供大家参考，具体内容如下
字符雨效果
分析如何实现

字符雨从上往下逐渐消失：这是canvas每次画字符的时候就画一遍黑色背景，但是这个背景是有透明度的，并且这个黑色背景的透明度还比较小，只有零点零八（经过测试，0.08比较合适，也可以更改查看效果）；字符是从上往下落，上面的字符先出现，下面的字符后出现，程序重复地画黑色背景，就算有透明度，叠加起来，上面的字符就会先被覆盖，下面的后出现的字符还是还比较明显，就形成了逐渐消失的效果。
只有其中一些列出现了字符：如果不加以控制的话，那么canvas中每一列都会出现字符，不会出现参差不齐的效果。所以用一个代表出现机率的数来控制，当字符落到canvas的底部，并且拿一个随机数和出现机率进行比较，如果随机数大于其，那么这一列就可以从顶部再次出现字符，否则这一列在本次循环就不会出现字符，只有等待下次循环再次拿随机数来比较。这样就实现了有一些列出现字符，而另一些不出现字符的效果。

创建实例

let charRain = new CharRain("canvas_id");

HTML结构

CSS代码

body{margin: 0; padding: 0; overflow: hidden; }#canvas{background-color: #111; }

JS源码

; (function(win){/*** 创造字符雨*/class CharRain{/*** @description CharRain 类的构造函数* @constructs* @param {string} canvas_id - canvas 元素的 id*/constructor(canvas_id){this.canvas = document.getElementById(canvas_id); this.context = this.canvas.getContext("2d"); this.bg_alpha = 0.08; // canvas背景的透明度，也是字符消失的速度；取值范围：0 - 1this.appearRate = 0.95; // canvas中每一列字符下落到底部后再次出现字符的机率；取值范围：0 - 1this.dropSpeed = 30; // 字符下落速度this.fontSize = 17; // 字符大小；也确定了字符列的数目，列之间的间距this.colunm = 0; // 画布中的字符列的数目this.isColorful = false; // 是否呈现彩色字符雨，默认为经典黑底绿字this.drops = []; // 记录每一列的字符下落的 y 值this.timer = null; // 定时器this.chars = "abcdefghijklmnopqrstuvwxyz0123456789"; // 可选字符this.init(); }/*** @description 初始化类*/init(){let _this = this; this.setAttr(); win.addEventListener("resize", function (){ // 添加浏览器窗口变化监听，重新设置相关属性_this.setAttr(); }); this.timer = setInterval(function (){// 添加定时器，下落_this.draw(); }, _this.dropSpeed); }/*** @description 设置类的一些属性*/setAttr(){this.canvas.width = win.innerWidth; this.canvas.height = win.innerHeight; // 重新设置 canvas 的宽度和高度this.colunm = Math.ceil(win.innerWidth / this.fontSize); // 重新设置列数for (let i=0; i=this.canvas.height && Math.random()>this.appearRate) { // 字符落到底部 && 有再次出现的机率this.drops[i] = 0; // 0 代表每一列的字符位置回到顶部} else {this.drops[i]++; // 字符逐渐下落，字符在 y 轴上的距离增加一}} }}win.CharRain = CharRain; }(window));

【JavaScript|JavaScript canvas实现字符雨效果】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。