黑客帝国矩阵动画效果-html代码-BFW代码库

黑客帝国矩阵动画效果

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>  Arrowtrix (Matrix Arrows)</title>
    <style>
        body {
            background: #020;
            margin: 0;
            padding: 0
        }
        canvas {
            background: #000;
        }
    </style>

</head>
<body onresize='_pexresize()'>
    <canvas id='canvas' width="1280" height="720"></canvas>

    <script>
        "use strict";
        var stage = {
            w: 1280,
            h: 720
        };


        var _pexcanvas = document.getElementById("canvas");
        _pexcanvas.width = stage.w;
        _pexcanvas.height = stage.h;
        var ctx = _pexcanvas.getContext("2d");




        var pointer = {
            x: 0,
            y: 0
        };


        var scale = 1;
        var portrait = true;
        var loffset = 0;
        var toffset = 0;
        var mxpos = 0;
        var mypos = 0;


        // ------------------------------------------------------------------------------- Gamy

        function drawArrow(fromx, fromy, tox, toy, lw, hlen, color) {
            var dx = tox - fromx;
            var dy = toy - fromy;
            var angle = Math.atan2(dy, dx);
            ctx.fillStyle = color;
            ctx.strokeStyle = color;
            ctx.lineCap = "round";
            ctx.lineWidth = lw;
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - hlen * Math.cos(angle - Math.PI / 6), toy - hlen * Math.sin(angle - Math.PI / 6));
            ctx.lineTo(tox - hlen * Math.cos(angle) / 2, toy - hlen * Math.sin(angle) / 2);
            ctx.lineTo(tox - hlen * Math.cos(angle + Math.PI / 6), toy - hlen * Math.sin(angle + Math.PI / 6));
            ctx.closePath();
            ctx.stroke();
            ctx.fill();
        }




        var arrows = [];
        function Arrow() {
            this.x = Math.floor(Math.random() * stage.w);
            this.y = Math.floor(Math.random() * stage.h) - stage.h;
            this.s = Math.floor(Math.random() * 40) + 10;
        }

        for (var i = 0; i < 150; i++) {
            arrows[i] = new Arrow();
        }
        var skip = 0;
        function enginestep() {
            ctx.fillStyle = "rgba(0,0,0,0.05)";
            ctx.fillRect(0, 0, stage.w, stage.h);
            skip++;
            if (skip > 3) {



                for (var i = 0; i < arrows.length; i++) {
                    var arr = arrows[i];
                    arr.y += arr.s / 1.1;
                    if (arr.y > stage.h + 100) {
                        arr.y = -100;

                        arr.x = Math.floor(Math.random() * stage.w);
                    }
                    var color = arr.s * 4 + 55;
                    drawArrow(arr.x, arr.y, arr.x, arr.y + arr.s / 1.8, arr.s / 5, arr.s / 20, "rgb(0," + color + ",0)");
                }
                skip = 0;
            }
        }


        // ------------------------------------------------------------------------------- events
        // ------------------------------------------------------------------------------- events
        // ------------------------------------------------------------------------------- events
        // ------------------------------------------------------------------------------- events

        function toggleFullScreen() {
            var doc = window.document;
            var docEl = doc.documentElement;

            var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
            var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;

            if (!doc.fullscreenElement && !.........完整代码请登录后点击上方下载按钮下载查看