您的位置：首页 > 编程学习 > > 正文

jscanvas背景色（JavaScript canvas实现代码雨效果）

更多时间：2021-11-08 16:23:24 类别：编程学习浏览量：2807

jscanvas背景色

JavaScript canvas实现代码雨效果

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

先看效果图

jscanvas背景色（JavaScript canvas实现代码雨效果）

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

canvas其实就是画布的意思
首先我们得有一个画布

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

再设这样一个背景

HTML部分

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

CSS部分

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #canvas{
            overflow: hidden;
            position: absolute;
            z-index: 1;
        }
        li{
            width: 480px;
            height: 280px;
            border-radius: 50%;
            background-image: url(img/第八天素材.jpg" alt="jscanvas背景色（JavaScript canvas实现代码雨效果）" border="0" />

jscanvas背景色（JavaScript canvas实现代码雨效果）

后面就是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>

如有不足，请多指导。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持开心学习网。

标签：js canvas 代码雨

上一篇：php获取socket连接的详细信息（php使用socket调用http和smtp协议实例小结）

下一篇：dedecms调用logo标签（dedecms返回列表页功能的标签代码）

您可能感兴趣

jscanvas背景色（JavaScript canvas实现代码雨效果）

jscanvas背景色

热门推荐

排行榜