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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js+css实现红包雨效果

    本文实例为大家分享了js实现红包雨展示的具体代码,供大家参考,具体内容如下 1.html部分 红包的样子,先写一个模版在页面上 <div class="hide"> <div class="RedPackage__Box js-RedPackageBox" data-txt> <img src="./images/redPackage.png" alt=""> </div> &l

  • JS实现代码雨特效

    JS实现代码雨特效

    本文实例为大家分享了JS实现代码雨特效的具体代码,供大家参考,具体内容如下 html代码 <canvas id="code_rain_canvas" width="1440" height="900"></canvas> js 代码 window.onload = function() {          //获取画布对象          var canvas = document.getElementById(&qu

  • js+canvas实现代码雨效果

    js+canvas实现代码雨效果

    本文实例为大家分享了js+canvas代码雨效果的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; } html,body{ height:

  • JavaScript实现代码雨效果

    JavaScript实现代码雨效果

    本文实例为大家分享了JavaScript实现代码雨效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en">   <head>   <meta charset="UTF-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <meta name=

  • JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果

    先看看JS+CSS+HTML实现"代码雨"类似黑客帝国文字下落最终效果: HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/ok.css" rel="external nofo

  • HTML+JS实现“代码雨”效果源码（黑客帝国文字下落效果）

    我们先看看HTML+JS实现"代码雨"的最终效果 1.绿色: 2.彩色: 3.背景色: 4.绿色逐渐变浅: 源代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Code -by ZhenYu.Sha</title>

  • JavaScript canvas实现代码雨效果

    JavaScript canvas实现代码雨效果

    本文实例为大家分享了canvas实现代码雨效果的具体代码,供大家参考,具体内容如下 先看效果图 这个效果图是不是像极了以前电影里面的黑客技术,看起来蛮难的,其实操作起来还是挺简单的. canvas其实就是画布的意思 首先我们得有一个画布 <body> <canvas id="canvas"></canvas> </body> 再设这样一个背景 HTML部分 <body> <canvas id="canvas&q

  • canvas+gif.js打造自己的数字雨头像的示例代码

    canvas+gif.js打造自己的数字雨头像的示例代码

    前天 是1024程序员节,不知道各位看官过的怎么样.既然是过节,就要有个过节的样子,比方说,换个头像

  • 基于JS实现漫画中大雨滂沱的效果

    基于JS实现漫画中大雨滂沱的效果

    目录 演示 技术栈 源码 css部分 大雨滂沱 演示 技术栈 最近用canvas有点上瘾,接着上次的雨滴和流星雨的思路我们在改进一下 <canvas id='canvas' width='1280' height='720'></canvas> 源码 css部分 body { margin:0; padding:0; background: #000; overflow:hidden; } canvas { background:url('../img/maxresdefault.

  • 利用JS打造黑客代码雨效果

    利用JS打造黑客代码雨效果

    目录 演示 技术栈 源码 画布 js样式设置 演示 技术栈 js实战我们也写过很多了,其中每次几乎都用到画布,大家知道它的重要性了吧.今天依旧用到它了.不过我们讲过它的用法就不多说了. 这次我们说一下window.onload window.onload() 方法用于在网页加载完毕后立刻执行的操作,即当 HTML 文档加载完毕后,立刻执行某个方法. window.onload() 通常用于 元素,在页面完全载入后(包括图片.css文件等等)执行脚本代码. 只有一个要执行的函数语法: window

随机推荐