纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

canvas代码雨 JavaScript canvas实现代码雨效果

joyouscola   2021-06-10 我要评论
想了解JavaScript canvas实现代码雨效果的相关内容吗joyouscola在本文为您仔细讲解canvas代码雨的相关知识和一些Code实例欢迎阅读和指正我们先划重点:js,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>

如有不足请多指导


相关文章

猜您喜欢

  • python mysql项目实战 python mysql项目实战及框架搭建过程

    想了解python mysql项目实战及框架搭建过程的相关内容吗总是幸福的老豌豆在本文为您仔细讲解python mysql项目实战的相关知识和一些Code实例欢迎阅读和指正我们先划重点:python,mysql项目实战,mysql项目实战,python,项目实战下面大家一起来学习吧..
  • Java基础入门 Java基础入门语法--String类

    想了解Java基础入门语法--String类的相关内容吗rain67在本文为您仔细讲解Java基础入门的相关知识和一些Code实例欢迎阅读和指正我们先划重点:Java入门,java基础入门,String入门下面大家一起来学习吧..

网友评论

Copyright 2020 www.fresh-weather.com 【世纪下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式