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

更新時間：2022年06月19日 14:08:53 作者：福州-司馬懿

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

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

<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");

? ? ? ? ? ? //動畫是否已經(jīng)開始
? ? ? ? ? ? var isStart = true;
? ? ? ? ? ? //循環(huán)調(diào)用器id
? ? ? ? ? ? var intervalId = 0;
? ? ? ? ? ? //每次循環(huán)繪制一個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;
? ? ? ? ? ? ? ? //文字的列數(shù)
? ? ? ? ? ? ? ? var columns = Math.floor(c.width / fontSize);
? ? ? ? ? ? ? ? //原來的列數(shù)
? ? ? ? ? ? ? ? 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);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? //如果當前已經(jīng)正在繪制，則需要先終止繪制再重啟繪制
? ? ? ? ? ? ? ? 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); ?
? ? ? ? ? ? }

? ? ? ? ? ? //切換當前狀態(tài)(開始 或 停止)
? ? ? ? ? ? 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>