分享JS四种好玩的黑客背景效果代码

更新时间：2021年11月25日 16:53:02 作者：Starzkg

大家好，本篇文章分享的是四种好玩的黑客背景效果JS代码，感兴趣的同学赶紧来试试吧，觉得还不错的话记得收藏一下哦，方便下次浏览

示例一

<html>
<head>
    <title>The Matrix</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
            type="text/javascript"></script>
    <meta charset="utf-8">
    <script>
        /*
            ① 用setInterval(draw, 33)设定刷新间隔
            ② 用String.fromCharCode(1e2+Math.random()*33)随机生成字母
            ③ 用ctx.fillStyle='rgba(0,0,0,.05)'; ctx.fillRect(0,0,width,height); ctx.fillStyle='#0F0′; 反复生成opacity为0.5的半透明黑色背景
            ④ 用x = (index * 10)+10;和yPositions[index] = y + 10;顺序确定显示字母的位置
            ⑤ 用fillText(text, x, y); 在指定位置显示一个字母 以上步骤循环进行，就会产生《黑客帝国》的片头效果。
        */
        $(document).ready(function () {
            var s = window.screen;
            var width = q.width = s.width;
            var height = q.height;
            var yPositions = Array(300).join(0).split('');
            var ctx = q.getContext('2d');
            var draw = function () {
                ctx.fillStyle = 'rgba(0,0,0,.05)';
                ctx.fillRect(0, 0, width, height);
                ctx.fillStyle = 'red';
                ctx.font = '10pt Georgia';
                yPositions.map(function (y, index) {
                    text = String.fromCharCode(1e2 + Math.random() * 33);
                    x = (index * 10) + 10;
                    q.getContext('2d').fillText(text, x, y);
                    if (y > Math.random() * 1e4) {
                        yPositions[index] = 0;
                    } else {
                        yPositions[index] = y + 10;
                    }
                });
            };
            RunMatrix();
            function RunMatrix() {
                Game_Interval = setInterval(draw, 30);
            }
        });
    </script>
</head>
<body>
    <div align="center">
        <canvas id="q" width="500" height="500"></canvas>
    </div>
</body>
</html>

示例二

<html>
<head>
 
    <title>Do You Know HACKER-2</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
            type="text/javascript"></script>
</head>
 
<body>
    <div align="center">
        <canvas id="myCanvas" width="1024" height="800" style="border:1px solid #c3c3c3;">
            Your browser does not support the HTML5 canvas tag.
        </canvas>
        <script type="text/javascript">
            var YPositions = Array(51).join(0).split('');
            /*
                join() 方法用于把数组中的所有元素放入一个字符串
                split() 方法用于把一个字符串分割成字符串数组
            */
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            var draw = function () {
                ctx.fillStyle = 'rgba(0,0,0,.05)';
                ctx.fillRect(0, 0, 1024, 800); ctx.fillStyle = "#0f0";
                YPositions.map(function (y, index) {
                    /*
                        map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象
                    */
                    x = (index * 10);
                    ctx.fillText(parseInt(Math.random() * 10), x, y);
                    /*
                        在(x,y)坐标位产生一个'a'字符
                        index为Ypositions的下标
                    */
                    if (y > 500) {
                        YPositions[index] = 0;
                    } else {
                        YPositions[index] = y + 10;
                    }
                    /*
                        如果新产生的字符已经到了<canvas>的辩解
                        那么就使产生下一个新字符的位置回归到原点
                     */
                });
            };
            setInterval(draw, 30);
        </script>
</body>
</html>

示例三

<html>
<head>
 
    <title>Do You Know HACKER-1</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
 
<body>
    <div align="center">
        <canvas id="myCanvasMatrix" width="500" height="200" style="border:1px solid #c3c3c3;">
            <!-- <canvas>标签在IE9以下的浏览器中并不被支持 -->
            Please Upgrade your browser
        </canvas>
        <br>
        <button type="button" id="puse">puse</button>
        <button type="button" id="run">run</button>
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
        /*
            var c2 = document.getElementById("myCanvasMatrix");
            var ctx2 = c2.getContext("2d");
            其中 'ctx2' 就等同于下面的 'ctx1'
        */
        var ctx1 = $("#myCanvasMatrix").get(0).getContext("2d");
        /*
            其中$("").get(0)表示获取内部的DOM对象引用
            也就是：获取到对象的dom对象后就可以使用对应的dom API
        */
        /*
            getContext() 方法返回一个用于在画布上绘图的环境。
            Canvas.getContext(contextID);
            其中contextID参数当前唯一的合法值为'2d'，也就是支持了二维绘图
            未来可能会支持'3d'这个参数哦~
        */
        var Matrix=function(){
            /*
                var my_gradient=ctx1.createLinearGradient(0,0,0,170);
                my_gradient.addColorStop(0,"black");
                my_gradient.addColorStop(1,"white");
                ctx1.fillStyle=my_gradient;
            */
            ctx1.fillStyle = 'rgba(0,0,0,.07)';
            /*
                fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
                rgba(R,G,B,A)
                其中'.05'代表阿尔法透明度
            */
            ctx1.fillRect(0,0,500,500);
            /*
                fillRect() 方法使用 fillStyle 属性所指定的颜色、渐变和模式来填充指定的矩形
            */
            ctx1.fillStyle = "#0f0";
            ctx1.fillText('zhengbin', Math.random()*(500), Math.random()*(500));
            ctx1.fillText('cnblogs', Math.random()*(500), Math.random()*(500));
            /*
                其原理就是不停的产生新的有透明度的背景和要显示的内容，
                这样新的背景不停的覆盖旧的显示内容
                新的内容就突显了出来
            */
        };
        runFun();
        var id;
        function stopFun(){
            clearInterval(id);
        }
        function runFun(){
            id = setInterval(Matrix,50);
        /*
           setInterval() 定义和用法:
           setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
           setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
        */
        }
        $("button#puse").click(function() {
            stopFun();
        });
        $("button#run").click(function() {
            runFun();
        });
    });
    </script>
</body>
</html>

示例四

<!DOCTYPE html>
 
<html>
 
<head>
 
<meta charset="utf-8">
 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
 
</head>
 
<body>
 
<canvas id="content" width="1250px" height="602px"></canvas>
 
</body>
 
</html>
 
<script>
 
  var cav = document.getElementById('content');
 
  var w = window.screen.width;
 
  var h = window.screen.height;
 
  var yPositions = Array(300).join(0).split('');
 
  var ctx = cav.getContext('2d');
 
  var draw = function(){
 
 
 
    ctx.fillStyle = 'rgba(0,0,0,.05)';
 
    ctx.fillRect(0,0,w,h);
 
    ctx.fillStyle = 'green';
 
    ctx.font = '20px';
 
 
 
    yPositions.map(function(y,index){
 
      text = String.fromCharCode(1e2+Math.random()*330);
 
      x = index*10;
 
      cav.getContext('2d').fillText(text,x,y);
 
      if(y>Math.random()*1e4){
 
        yPositions[index]=0;
 
      }else{
 
        yPositions[index]=y+10;
 
      }
 
    });
 
 
 
  }
 
  setInterval('draw()',30);
 
</script>

参考文章

https://www.cnblogs.com/fenger-VIP/p/7651562.html

到此这篇关于分享四种好玩的黑客背景效果JS代码的文章就介绍到这了,更多相关黑客背景效果 JS代码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript判断数字是否为质数的方法汇总
这篇文章主要介绍了JavaScript判断数字是否为质数的方法汇总的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
zTree插件之多选下拉菜单实例代码
zTree插件之多选下拉菜单实例代码。需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
js,jQuery 排序的实现,网页标签排序的实现,标签排序，需要的朋友可以参考下。
2011-04-04
原生JavaScript实现留言板
这篇文章主要为大家详细介绍了原生JavaScript实现留言板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-01-01
基于Three.js实现3D玉兔效果的示例代码
2022年中秋佳节即将来临，中秋节是我们国家的传统节日。而中秋与玉兔又往往会联系在一起，本文将用Threejs做一只会动的3D玉兔，感兴趣的可以了解一下
2022-08-08
iframe 异步加载技术及性能分析
我们会经常使用iframes来加载第三方的内容、广告或者插件。使用iframe是因为他可以和主页面并行加载，不会阻塞主页面。
2011-07-07
JS作用域链详解
这篇文章主要为大家详细介绍了JS作用域链的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
微信小程序实现列表分页功能
这篇文章主要为大家详细介绍了微信小程序实现列表分页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
JavaScript Date 知识浅析
这篇文章主要介绍了JavaScript Date 知识，非常不错，具有参考借鉴价值，需要的朋友参考下吧
2017-01-01
在HTML中嵌入JS代码的3种方式总结
现在的前端JavaScript可以说是异常火爆,即使并不准备向前端发展,但是对前端的一些基础知识还是必须有所了解的,先这篇文章主要给大家介绍了关于在HTML中嵌入JS代码的3种方式,需要的朋友可以参考下
2022-11-11

分享JS四种好玩的黑客背景效果代码

目录

示例一

示例二

示例三

示例四

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具