demo/index.html

<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>errorEruda BASED ON ERUDA DEVELOPMENT AND DEBUGGING, FAULT MONITORING REPORT, THE USER LOCATION
        PROBLEM.</title>
    <script src="./../error_Eruda.js"></script>
    <script>
        errorEruda.config({
            jsUrl: '//cdn.jsdelivr.net/eruda/1.2.2/eruda.min.js',//eruda地址
            repUrl: "http://127.0.0.1:4001/error/",//错误上报地址
            repMsg: 'test',//错误上报msg前缀，一般用于标识业务类型
            entry: "#app"
        })

        console.log(休息休息吧);

    </script>

    <link href="css/index_style.css" rel="stylesheet" type="text/css">
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        .warp {
            color: #fff;
            font-size: 40px;
            padding-top: 10%;
            text-align: center;
        }

        .info {
            color: #fff;
            font-size: 18px;
            padding-top: 30px;
            text-align: center;
        }

        .eruda-container .eruda-entry-btn {
            color: #fff !important;
            background: #2196f3 !important;
            opacity: 1 !important;
        }

        .bt {
            padding: 10px 46px;
            font-size: 12px;
            border-radius: 4px;
            margin-right: 20px;
            cursor: pointer;
        }

        .f3 {
            border: 2px solid #2196f3;
            color: #2196f3;
        }

        .E89FB {
            border: 2px solid #5E89FB;
            color: #5E89FB;
        }

        .F38C {
            border: 2px solid #18F38C;
            color: #18F38C;

        }

        a {
            text-decoration: none
        }
    </style>


</head>
<body style="height: 100%">
<div class="header" style="height: 100%" id="demo">
    <canvas style="height: 100%" id="canvas"></canvas>
</div>

<div style=" top: 0; margin: auto;  position: absolute;  left: 0; bottom: 0; right: 0;  " onselectstart="return false;">
    <div class="warp">
        ERRORERUDA
    </div>
    <div class="info">
        BASED ON ERUDA DEVELOPMENT AND DEBUGGING, FAULT MONITORING REPORT, THE USER LOCATION PROBLEM.
    </div>
    <div class="info">
        基于ERUDA开发调试发布，错误监控上报，用户问题定位
    </div>

    <div style="text-align: center;margin-top: 50px">
        <a href="https://github.com/317482454/errorEruda#使用方法" target="_blank">
            <span class="bt E89FB">DOCS</span>
        </a>
        <span id="app" class="bt  F38C">Click me 6 times!</span>
        <a href="https://github.com/317482454/errorEruda" target="_blank">
            <span class="bt E89FB">GitHub</span>
        </a>
    </div>
    <div style="text-align: center;margin-top: 50px">
        <a href="https://github.com/AlloyTeam/AlloyLever#usage" target="_blank">
            <span class="bt f3">AlloyTeam</span>
        </a>
        <a href="https://github.com/liriliri/eruda" target="_blank">
            <span class="bt f3">Eruda</span>
        </a>
    </div>

</div>

</body>


<script>
//宇宙特效
"use strict";
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
w = canvas.width = window.innerWidth,
h = canvas.height = window.innerHeight,

hue = 217,
stars = [],
count = 0,
maxStars = 1300;//星星数量

var canvas2 = document.createElement('canvas'),
ctx2 = canvas2.getContext('2d');
canvas2.width = 100;
canvas2.height = 100;
var half = canvas2.width / 2,
gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
gradient2.addColorStop(0.025, '#CCC');
gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
gradient2.addColorStop(1, 'transparent');

ctx2.fillStyle = gradient2;
ctx2.beginPath();
ctx2.arc(half, half, half, 0, Math.PI * 2);
ctx2.fill();

// End cache

function random(min, max) {
if (arguments.length < 2) {
max = min;
min = 0;
}

if (min > max) {
var hold = max;
max = min;
min = hold;
}

return Math.floor(Math.random() * (max - min + 1)) + min;
}

function maxOrbit(x, y) {
var max = Math.max(x, y),
diameter = Math.round(Math.sqrt(max * max + max * max));
return diameter / 2;
//星星移动范围，值越大范围越小，
}

var Star = function () {

this.orbitRadius = random(maxOrbit(w, h));
this.radius = random(60, this.orbitRadius) / 8;
//星星大小
this.orbitX = w / 2;
this.orbitY = h / 2;
this.timePassed = random(0, maxStars);
this.speed = random(this.orbitRadius) / 50000;
//星星移动速度
this.alpha = random(2, 10) / 10;

count++;
stars[count] = this;
}

Star.prototype.draw = function () {
var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
twinkle = random(10);

if (twinkle === 1 && this.alpha > 0) {
this.alpha -= 0.05;
} else if (twinkle === 2 && this.alpha < 1) {
this.alpha += 0.05;
}

ctx.globalAlpha = this.alpha;
ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
this.timePassed += this.speed;
}

for (var i = 0; i < maxStars; i++) {
new Star();
}

function animation() {
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = 0.5; //尾巴
ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
ctx.fillRect(0, 0, w, h)

ctx.globalCompositeOperation = 'lighter';
for (var i = 1, l = stars.length; i < l; i++) {
stars[i].draw();
}
;

window.requestAnimationFrame(animation);
}

animation();
</script>

</html>