JavaScript canvas實現(xiàn)代碼雨效果

更新時間：2021年06月10日 08:30:47 作者：joyouscola

這篇文章主要為大家詳細介紹了JavaScript canvas實現(xiàn)代碼雨效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了canvas實現(xiàn)代碼雨效果的具體代碼，供大家參考，具體內(nèi)容如下

先看效果圖

這個效果圖是不是像極了以前電影里面的黑客技術(shù)，看起來蠻難的，其實操作起來還是挺簡單的。

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);
    //創(chuàng)建一個數(shù)組 用來存放字的
    var arr = [];
    for(var i = 0; i < count; i++){
        arr.push(0);
        console.log(arr);
    }
    //用數(shù)組的方式 存放數(shù)據(jù)
    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();//調(diào)用函數(shù)
    var timer = setInterval(show,30);
</script>

如有不足，請多指導。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: