JavaScript canvas实现代码雨效果

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

相关推荐

  • JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果

    先看看JS+CSS+HTML实现"代码雨"类似黑客帝国文字下落最终效果: HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/ok.css" rel="external nofo

  • HTML+JS实现“代码雨”效果源码（黑客帝国文字下落效果）

    我们先看看HTML+JS实现"代码雨"的最终效果 1.绿色: 2.彩色: 3.背景色: 4.绿色逐渐变浅: 源代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Code -by ZhenYu.Sha</title>

  • JavaScript canvas实现代码雨效果

    JavaScript canvas实现代码雨效果

    本文实例为大家分享了canvas实现代码雨效果的具体代码,供大家参考,具体内容如下 先看效果图 这个效果图是不是像极了以前电影里面的黑客技术,看起来蛮难的,其实操作起来还是挺简单的. canvas其实就是画布的意思 首先我们得有一个画布 <body> <canvas id="canvas"></canvas> </body> 再设这样一个背景 HTML部分 <body> <canvas id="canvas&q

  • JavaScript canvas实现字符雨效果

    JavaScript canvas实现字符雨效果

    本文实例为大家分享了JavaScript canvas实现字符雨效果的具体代码,供大家参考,具体内容如下 字符雨效果 分析如何实现 字符雨从上往下逐渐消失: 这是canvas每次画字符的时候就画一遍黑色背景,但是这个背景是有透明度的,并且这个黑色背景的透明度还比较小,只有零点零八(经过测试,0.08比较合适,也可以更改查看效果):字符是从上往下落,上面的字符先出现,下面的字符后出现,程序重复地画黑色背景,就算有透明度,叠加起来,上面的字符就会先被覆盖,下面的后出现的字符还是还比较明显,就形成了逐

  • js+canvas实现代码雨效果

    js+canvas实现代码雨效果

    本文实例为大家分享了js+canvas代码雨效果的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; } html,body{ height:

  • JavaScript实现代码雨效果

    JavaScript实现代码雨效果

    本文实例为大家分享了JavaScript实现代码雨效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en">   <head>   <meta charset="UTF-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <meta name=

  • 利用JS打造黑客代码雨效果

    利用JS打造黑客代码雨效果

    目录 演示 技术栈 源码 画布 js样式设置 演示 技术栈 js实战我们也写过很多了,其中每次几乎都用到画布,大家知道它的重要性了吧.今天依旧用到它了.不过我们讲过它的用法就不多说了. 这次我们说一下window.onload window.onload() 方法用于在网页加载完毕后立刻执行的操作,即当 HTML 文档加载完毕后,立刻执行某个方法. window.onload() 通常用于 元素,在页面完全载入后(包括图片.css文件等等)执行脚本代码. 只有一个要执行的函数语法: window

  • JavaScript canvas实现镜像图片效果

    JavaScript canvas实现镜像图片效果

    本文实例为大家分享了JavaScript canvas实现镜像图片效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Using image</title> <style type="text/css"> * { /* margin: 0; padding: 0; */ bo

  • JavaScript Canvas绘制动态线框效果

    JavaScript Canvas绘制动态线框效果

    本文实例为大家分享了JavaScript Canvas绘制动态线框效果的具体代码,供大家参考,具体内容如下 本周项目,移动端页面开发,要求丰富的动效,主要技术实现 Canvas :其中绘制动态线框,走了点弯路,所谓的弯路是逻辑问题,非技术实现方式. 一.涉及技术点,具体如下: 1.html 中引入canvas 标签,设置宽高: <canvas id="canvas" width=xx height=xx>您的浏览器不支持canvas,请更换版本</canvas>

  • JavaScript+Canvas实现带跳动效果的粒子动画

    目录 前言 实现过程 运行效果 总结 前言 用 HTML5 的 Canvas 元素实现一个带有跳动效果的粒子动画.会用到 Canvas 的2D渲染上下文,通过 JavaScript 编写绘图代码,实现画布上一系列粒子的随机运动和相互作用.还会使用 CSS3 动画属性,使得画布背景颜色和粒子颜色能够流畅地过渡,达到更加自然的效果. 代码运行效果在底部 实现过程 1.创建 Canvas 元素,并获取其上下文 在实现粒子跳动动画的过程中,第一步需要创建一个 Canvas 元素,并获取其上下文.Canv

  • Python实现屏幕代码雨效果的示例代码

    Python实现屏幕代码雨效果的示例代码

    直接上代码 import pygame import random def main(): # 初始化pygame pygame.init() # 默认不全屏 fullscreen = False # 窗口未全屏宽和高 WIDTH, HEIGHT = 1100, 600 init_width, init_height = WIDTH, HEIGHT # 字块大小,宽,高 suface_height = 18 # 字体大小 font_size = 20 # 创建一个窗口 screen = pyga

随机推荐