JavaScript中canvas实现代码雨效果的方法

发布时间:2021-06-10 10:20:46 作者:小新
来源:亿速云 阅读:217

这篇文章将为大家详细讲解有关JavaScript中canvas实现代码雨效果的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

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

先看效果图

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

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>

关于“JavaScript中canvas实现代码雨效果的方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

推荐阅读:
  1. canvas怎么实现爱心和彩虹雨的效果
  2. JavaScript中canvas动画实现时钟效果的方法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

javascript canvas

上一篇:PHP排序算法系列之插入排序的示例分析

下一篇:如何使用C#多线程处理多个队列数据

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》