使用canvas绘制数字雨

最新推荐文章于 2022-11-16 10:02:41 发布

旧时梦Cc

最新推荐文章于 2022-11-16 10:02:41 发布

阅读量804

点赞数

文章标签： HTML5 JavaScript 动态数字画布视觉艺术

本文链接：https://blog.csdn.net/qq_35394917/article/details/121649603

版权

话不多说上代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数字雨</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            background-color: black;
            overflow: hidden;
        }
    </style>
    <script>
        window.onload=function(){
        var drCav = document.getElementById("digitalRain");
        
        /*将画布大小设置为窗口文档显示区大小*/
        var width = window.innerWidth;
        var height = window.innerHeight;
        drCav.width = width;
        drCav.height = height;
    
        var fontsize = 16;                          //数字字体大小
        var columns = Math.ceil(width / fontsize);  //列数（向上取整）
        var dropLine = [];                          
        for (var i = 0; i < columns; i++) {
            dropLine[i] = 0;
        }
        
        /*Run*/
        if(drCav.getContext){
            var ctx = drCav.getContext("2d");
            timer = setInterval(draw, 30);
        }

        function draw() {
            ctx.fillStyle = "rgba(0, 0, 0, 0.05)";   //设置透明度，逐渐覆盖之前的数字
            ctx.fillRect(0, 0, width, height);       //填充画布
            
            ctx.fillStyle = "#00FF00";               
            ctx.font = fontsize + "px Simsun";
            for (var i = 0; i < columns; i++) {
                var figure = Math.floor(Math.random()*10);  //生成0~9的伪随机数
                
                /*绘制数字(核心部分)*/
                ctx.fillText(figure, i * fontsize, dropLine[i] * fontsize);
                if (dropLine[i] * fontsize > height || Math.random() > 0.95){
                    dropLine[i] = 0;
                }
                dropLine[i]++;
            }
        }
    }
    </script>
</head>
<body>
    <canvas id="digitalRain">
    </canvas>
</body>
</html>