Web前端-html 5—CANVAS数字雨

最新推荐文章于 2024-05-12 06:37:04 发布

yanghainan0318

最新推荐文章于 2024-05-12 06:37:04 发布

阅读量875

点赞数 1

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/yanghainan0318/article/details/104561185

版权

html5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas width="1400" height="800" style="border: 1px solid #000;">请更新您的浏览器</canvas>
<!--<button>-->
        <!--点击-->
<!--</button>-->

<script>
    var mycanvas = document.querySelector("canvas");
    var ctx = mycanvas.getContext("2d");

    ctx.textBaseline = "top";
    ctx.font = "20px '宋体'";
    var count =mycanvas.width/20;
    var  str = "qwertyuioplmkjnhbgvfcdxsza0123456789";

    //第一个数组 数组用来存储值 数组的长度用来定义的是自己的列
    var arr = [];
    for (var i = 0; i < count; i++) {
        arr[i] = 0;
    }

    var times = setInterval(draw,60);
    var y =0;
    function draw() {

        ctx.fillStyle = "rgba(0,0,0,0.05)";
        ctx.fillRect(0,0,1400,800);


        ctx.fillStyle = "#0f0";
        for (var i = 0; i < count; i++) {
            //     角标是0 ~str.length-1之间的随机值
            // Math.random()*str.length

            ctx.fillText(str[parseInt(Math.random()*str.length)], i * 20, arr[i]*20);




            // ctx.fillText(str[i], i * 20, arr[i]*20);
            // ctx.fillText("A", i * 20, arr[i]*20);
            // console.log("当i = "+i  +"---->"+arr[i]);
            arr[i]++;
            //此时实现了每一个列可以自主的控制
            if(arr[i]>40 &&Math.random()>0.95){
                arr[i] = 0
            }
        }


    }

    // document.querySelector("button").onclick = function () {
    //     clearInterval(times)
    // }

    // console.log(parseInt(Math.random()*15));
</script>
</body>
</html>

yanghainan0318

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Web前端-html 5—CANVAS数字雨

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><canvas width="1400" height="800" style="...
复制链接

扫一扫