2021-06-18

qq_44875177

于 2021-06-18 16:57:58 发布

阅读量157

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_44875177/article/details/118027743

版权

@TOCjs

js数字雨效果实现

//numberRain.html
<html>
    <head>
        <meta charset="utf-8">
        <title>数字雨</title>
    </head>

    <body>
        <canvas id="myCanvas" width="1000" height="800">
            your browser doesn't support canvas;
        </canvas>
        <style>
            body{
                background-color: black;
            }
        </style>
        <script src="src/wind-core.js" type="text/javascript"></script>
        <script src="src/wind-compiler.js" type="text/javascript"></script>
        <script src="src/wind-builderbase.js" type="text/javascript"></script>
        <script src="src/wind-async.js" type="text/javascript"></script>
        <script src="src/numberRain.js" type="text/javascript"></script>
        <script>
            var canvas = document.getElementById("myCanvas");
            canvas.width = SCREEN_WIDTH;
            canvas.height = SCREEN_HEIGHT;
            
            var ctx = canvas.getContext("2d");
            var NUMBER_NUM = 300;

            var rains = new Array(numberRain);
            for(var i = 0; i < NUMBER_NUM; i ++){
                rains[i] = new numberRain();
                rains[i].init();
            }

            const drawRain = eval(Wind.compile("async", function(){
                while(true){
                    $await(Wind.Async.sleep(10));
                    ctx.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);

                    for(var i = 0; i < NUMBER_NUM; i ++){
                        rains[i].move();
                        if(rains[i].y > SCREEN_HEIGHT){
                            rains[i].init();
                        }
                        rains[i].draw(ctx);
                    }
                }
            }))

            drawRain().start();

        </script>
    </body>
</html>

//numberRain.js
const SCREEN_WIDTH = document.documentElement.clientWidth;
const SCREEN_HEIGHT = document.documentElement.clientHeight;

class numberRain{
    constructor(){
        this.fontsize = 0;
        this.x = 0;
        this.y = 0;
        this.vy = 10;
        this.value = null;
        this.opacity = 0;
    }

    init(){
        this.fontsize = Math.floor(Math.random() * 30 + 10)
        this.x = Math.random() * SCREEN_WIDTH;
        this.y = 0;
        this.vy = Math.random() * 10 + 10;
        this.value = String(Math.floor(Math.random() * 10));
        this.opacity = Math.random();
    }

    move(){
        this.y = this.y + this.vy;
    }

    draw(ctx){
        ctx.fillStyle = "rgba(0, 255, 0," + this.opacity + ")";
        ctx.font = this.fontsize + "px Arial";
        console.log(this.value, this.y, this.fontsize);
        ctx.fillText(this.value, this.x, this.y, this.fontsize);
    }
}