炫酷的数字雨-CFANZ编程社区

炫酷的数字雨
主要使用canvas标签结合JavaScript写成
效果
代码书写
<!DOCTYPE html>
<html lang='zh'>
<head>
    <meta charset='UTF-8'>
    <title>mm</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style:none;
        }
        canvas{ 
            display:block;
            background:black;
        }
    </style>
</head>
<canvas></canvas>
<body>
    <script>
        let canvas = document.querySelector("canvas"),
            width = canvas.width = window.innerWidth,
            height = canvas.height = window.innerHeight,
            cxt = canvas.getContext("2d"),
            onOff = true;


        //获取浏览器的宽高
        window.addEventListener("resize",function(){
            width = canvas.width = window.innerWidth;
            height = canvas.height = window.innerHeight;
        }) 

        let arr = new Array(255).join("1").split("");// 创建255个数组元素空位,元素类型为字符串,进行切割

        function draw(){
            if(onOff){
                cxt.fillStyle = "rgba(0,0,0,.05)";//设置填充颜色
                cxt.fillRect(0,0,width,height);//实心矩形图形(起点,终点)
            }else{
                canvas.style.backgroundImage = `url("${img.src}")`
                cxt.clearRect(0,0,width,height);//清理矩形;
            }
            cxt.fillStyle = "green";
            arr.map(function(v,i){
                cxt.font = "22px 宋体";
                let text = Math.floor(Math.round(Math.random()));//网页显示的内容
                let x = i*10;
                cxt.fillText(text,x,v);//描绘文字(文字内容,x坐标,y坐标)
                arr[i] = ( (v>height+Math.random()*1000)?0:v+15);
            })
            requestAnimationFrame(draw);
        }
        draw();
    </script>
</body>
</html>
0 条评论