JavaScript canvas实现代码雨效果

Z时代
2024-01-10
分类：IT

本文实例为大家分享了canvas实现代码雨效果的具体代码，供大家参考，具体内容如下

先看效果图

这个效果图是不是像极了以前电影里面的黑客技术，看起来蛮难的，其实操作起来还是挺简单的。

canvas其实就是画布的意思

首先我们得有一个画布


<body>
    <canvas id="canvas"></canvas>
</body>

再设这样一个背景

HTML部分


<body>
    <canvas id="canvas"></canvas>
    <div></div>
</body>

CSS部分


<style>
        *{
            margin: 0;
            padding: 0;
        }
        #canvas{
            overflow: hidden;
            position: absolute;
            z-index: 1;
        }
        div{
            width: 480px;
            height: 280px;
            border-radius: 50%;
            background-image: url(img/第八天素材.jpg);
            position: absolute;
            top: calc(50% - 140px);
            left: calc(50% - 240px);
            z-index: 2;
            opacity: 0.4;
        }
</style>

后面就是JS部分

一个画布，一个画笔，还有给画布一个宽高


<script>
 var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var width = window.innerWidth;
    var height = window.innerHeight;
    canvas.height = height;
    canvas.width = width;
</script>

详细代码如下：


<script>
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var width = window.innerWidth;
    var height = window.innerHeight;
    canvas.height = height;
    canvas.width = width;
    //设置一个  字体大小的变量
    var fontsize = 16;
    //设置一个变量用来存放 一整行能够同时容纳多少个字
    var count = width/fontsize;
    console.log(count);
    //创建一个数组 用来存放字的
    var arr = [];
    for(var i = 0; i < count; i++){
        arr.push(0);
        console.log(arr);
    }
    //用数组的方式 存放数据
    var stringarr = "I Love You"
    function show(){
    //开始画画
        context.beginPath();
        context.fillRect(0,0,width,height);
        //透明度
        context.fillStyle = "rgba(0,0,0,0.05)";
        //字体得颜色
        context.strokeStyle = "chartreuse";
        for(
            var i =0;
            i<arr.length;
            i++
        )
        {
            var x = i*fontsize;
            var y = arr[i]*fontsize;
            var index = Math.floor(Math.random()*stringarr.length);
            context.strokeText(stringarr[index],x,y);
            if(
                y >=height&&Math.random()>0.99
            ){
                arr[i]=0;
            }
            arr[i]++;
        }
        context.closePath();
    }
    show();//调用函数
    var timer = setInterval(show,30);
</script>