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

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

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

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

先看效果圖

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

canvas其實(shí)就是畫(huà)布的意思
首先我們得有一個(gè)畫(huà)布

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

再設(shè)這樣一個(gè)背景

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部分
一個(gè)畫(huà)布，一個(gè)畫(huà)筆，還有給畫(huà)布一個(gè)寬高

<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>

詳細(xì)代碼如下：

<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;
    //設(shè)置一個(gè)  字體大小的變量
    var fontsize = 16;
    //設(shè)置一個(gè)變量用來(lái)存放 一整行能夠同時(shí)容納多少個(gè)字
    var count = width/fontsize;
    console.log(count);
    //創(chuàng)建一個(gè)數(shù)組 用來(lái)存放字的
    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(){
    //開(kāi)始畫(huà)畫(huà)
        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>

如有不足，請(qǐng)多指導(dǎo)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: