JavaScript?canvas實現(xiàn)字符雨效果

更新時間：2022年06月19日 10:53:38 作者：羊角枇杷

這篇文章主要為大家詳細(xì)介紹了JavaScript?canvas實現(xiàn)字符雨效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript canvas實現(xiàn)字符雨效果的具體代碼，供大家參考，具體內(nèi)容如下

字符雨效果

分析如何實現(xiàn)

字符雨從上往下逐漸消失：這是canvas每次畫字符的時候就畫一遍黑色背景，但是這個背景是有透明度的，并且這個黑色背景的透明度還比較小，只有零點零八（經(jīng)過測試，0.08比較合適，也可以更改查看效果）；字符是從上往下落，上面的字符先出現(xiàn)，下面的字符后出現(xiàn)，程序重復(fù)地畫黑色背景，就算有透明度，疊加起來，上面的字符就會先被覆蓋，下面的后出現(xiàn)的字符還是還比較明顯，就形成了逐漸消失的效果。
只有其中一些列出現(xiàn)了字符：如果不加以控制的話，那么canvas中每一列都會出現(xiàn)字符，不會出現(xiàn)參差不齊的效果。所以用一個代表出現(xiàn)機(jī)率的數(shù)來控制，當(dāng)字符落到canvas的底部，并且拿一個隨機(jī)數(shù)和出現(xiàn)機(jī)率進(jìn)行比較，如果隨機(jī)數(shù)大于其，那么這一列就可以從頂部再次出現(xiàn)字符，否則這一列在本次循環(huán)就不會出現(xiàn)字符，只有等待下次循環(huán)再次拿隨機(jī)數(shù)來比較。這樣就實現(xiàn)了有一些列出現(xiàn)字符，而另一些不出現(xiàn)字符的效果。

創(chuàng)建實例

let charRain = new CharRain("canvas_id");

HTML結(jié)構(gòu)

<canvas id="canvas"></canvas>

CSS代碼

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

JS源碼

;(function(win){

? ? /**
? ? ?* 創(chuàng)造字符雨
? ? ?*/
? ? class CharRain
? ? {
? ? ? /**
? ? ? ?* @description CharRain 類的構(gòu)造函數(shù)
? ? ? ?* @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 - 1
? ? ? ? this.appearRate = 0.95; ?// canvas中每一列字符下落到底部后再次出現(xiàn)字符的機(jī)率；取值范圍：0 - 1
? ? ? ? this.dropSpeed = 30; ? ? // 字符下落速度
? ? ? ? this.fontSize = 17; ? ? // 字符大??；也確定了字符列的數(shù)目，列之間的間距
? ? ? ? this.colunm = 0; ? ? ? ?// 畫布中的字符列的數(shù)目
? ? ? ? this.isColorful = false; // 是否呈現(xiàn)彩色字符雨，默認(rèn)為經(jīng)典黑底綠字
? ? ? ? this.drops = []; ? ? ? ?// 記錄每一列的字符下落的 y 值
? ? ? ? this.timer = null; ? ? ?// 定時器
? ? ? ? this.chars = "abcdefghijklmnopqrstuvwxyz0123456789"; ?// 可選字符
? ? ? ? this.init();
? ? ? }

? ? ? /**
? ? ? ?* @description 初始化類
? ? ? ?*/
? ? ? init(){
? ? ? ? let _this = this;
? ? ? ? this.setAttr();
? ? ? ? win.addEventListener("resize", function (){ // 添加瀏覽器窗口變化監(jiān)聽，重新設(shè)置相關(guān)屬性
? ? ? ? ? _this.setAttr();
? ? ? ? });
? ? ? ? this.timer = setInterval(function (){ ? ? ? // 添加定時器，下落
? ? ? ? ? _this.draw();
? ? ? ? }, _this.dropSpeed);
? ? ? }

? ? ? /**
? ? ? ?* @description 設(shè)置類的一些屬性
? ? ? */
? ? ? setAttr(){
? ? ? ? this.canvas.width = win.innerWidth;
? ? ? ? this.canvas.height = win.innerHeight; ? ? ? ? ? ? ? ? ? ? // 重新設(shè)置 canvas 的寬度和高度
? ? ? ? this.colunm = Math.ceil(win.innerWidth / this.fontSize); // 重新設(shè)置列數(shù)
? ? ? ? for (let i=0; i<this.colunm; i++) {
? ? ? ? ? if(!this.drops[i]) { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// 已經(jīng)存在下落字符的列不用設(shè)置
? ? ? ? ? ? this.drops[i] = win.innerHeight; ? ? ? ? ? ? ? ? ? ? ?// 字符瀑布流直接開始下落
? ? ? ? ? }
? ? ? ? }
? ? ? }

?? ? ?/**
? ? ? ?* @description 隨機(jī)一個顏色
? ? ? ?* @return {string} rgba 顏色值
? ? ? */
? ? ? randomColor(){
? ? ? ? let r = Math.floor(Math.random()*256);
? ? ? ? let g = Math.floor(Math.random()*256);
? ? ? ? let b = Math.floor(Math.random()*256);
? ? ? ? return "rgba("+r+","+g+","+b+", 1)";
? ? ? }

? ? ? /**
? ? ? ?* @description 在畫布上畫出下落的字符
? ? ? */
? ? ? draw(){
? ? ? ? this.context.fillStyle = "rgba(1,1,1," + this.bg_alpha + ")"; ? ?// 疊加畫黑色背景，通過不透明度，形成字符逐漸消失的效果
? ? ? ? this.context.fillRect(0, 0, win.innerWidth, win.innerHeight); ? ?// 畫矩形以清除之前畫的字符
? ? ? ? this.context.font = this.fontSize + "px Consolas"; ? ? ? ? ? ? ? // 設(shè)置字符的大小、樣式
? ? ? ? if(this.isColorful) {
? ? ? ? ? this.context.fillStyle = this.randomColor(); ? ? ? ? ? ? ? ? ? // 呈現(xiàn)彩色字符雨
? ? ? ? } else {
? ? ? ? ? this.context.fillStyle = "#00cc33"; ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 經(jīng)典黑底綠字
? ? ? ? }

? ? ? ? for(let i=0; i<this.colunm; i++) { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 在每一列上畫出字符
? ? ? ? ? let index = Math.floor(Math.random() * this.chars.length); ? ?// 隨機(jī)一個字符
? ? ? ? ? let x = i * this.fontSize;
? ? ? ? ? let y = this.drops[i] * this.fontSize; ? ? ? ? ? ? ? ? ? ? ? ?// 字符在 y 軸方向上的距離
? ? ? ? ? this.context.fillText(this.chars[index], x, y); ? ? ? ? ? ? ? // 畫字符
? ? ? ? ? if (y>=this.canvas.height && Math.random()>this.appearRate) { // 字符落到底部 && 有再次出現(xiàn)的機(jī)率
? ? ? ? ? ? this.drops[i] = 0; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// 0 代表每一列的字符位置回到頂部
? ? ? ? ? } else {
? ? ? ? ? ?? ?this.drops[i]++; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// 字符逐漸下落，字符在 y 軸上的距離增加一
? ? ? ? ? }
? ? ? ? }?
? ? ? }
? ? }

? ? win.CharRain = CharRain;
? }(window));

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: