• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

JavaScript canvas实现代码雨效果

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文实例为大家分享了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>

如有不足,请多指导。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
详解vue3中setUp和reactive函数的用法发布时间:2022-02-05
下一篇:
详解JavaScript堆栈与拷贝发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap