2021-06-18

@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);
    }
}


效果:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值