用canvas做出自己的500页面

最新推荐文章于 2023-05-27 19:17:11 发布

generalfyx

最新推荐文章于 2023-05-27 19:17:11 发布

阅读量384

点赞数

分类专栏： JavaScript 文章标签： canvas

本文链接：https://blog.csdn.net/generalfyx/article/details/90904517

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

canvas的基本用法大家查找文档就可以了，这里只放代码，代码很简单；

<!doctype html>
<!--50x.html-->
<html>

<head>
    <title>canvas</title>
    <meta charset="utf-8"> 
    <style>
        body {
            height: 100%;
            width: 100%;
            position: absolute;
            display: table;
            margin: 0;
            background: rgba(41, 171, 226, 0.1)
        }

        .inner {
            display: none;
            margin-top: 270px;
            text-align: center;
        }

        #textStock {
            width: 750px;
            height: 450px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -375px;
            margin-top: -225px;
        }

        a {
            width: 100px;
            height: 30px;
            display: block;
            margin-left: 280px;
            margin-top: 30px;
            text-decoration: none;
            vertical-align: middle;
            line-height: 30px;
            cursor: pointer;
            z-index: 9999;
            border: 1px solid #31afe3;
            border-radius: 16px;
            color: #fff;
        }
    </style>
</head>

<body>
    <canvas id="testStock" width="750" height="450">
        <div class="lang-en inter">
            <p> An unknown error has been occurred. Please contact with the tech for supports!</p>
            <a href="javascript: eval(window.location.href=window.location.origin)">Home</a>
        </div>
    </canvas>
</body>
<script>
    function getLang() {
        try {
            return document.cookie.match(new RegExp('(^|\\s)language=([^;]*)(;|$)'))[2] || 'zh-cn';
        } catch (error) {
            return 'zh-cn';
        }
    }
    function draw(ctx) {
        ctx.clearRect(0, 0, 750, 450);
        ctx.arc(100, 40, 35, PI * 0.5, PI * 1.5, false)
        ctx.lineTo(500, 5)
        ctx.arc(500, 40, 35, PI * 1.5, PI * 2.5, false)
        ctx.lineTo(425, 75)
        ctx.arc(425, 100, 25, PI * 1.5, PI * 2.5, true)
        ctx.lineTo(600, 125)
        ctx.arc(600, 160, 35, PI * 1.5, PI * 2.5, false)
        ctx.lineTo(525, 195)
        ctx.arc(525, 220, 25, PI * 1.5, PI * 2.5, true)
        ctx.arc(700, 280, 35, PI * 1.5, PI * 2.5, false)
        ctx.lineTo(600, 315)
        ctx.arc(425, 340, 25, PI * 1.5, PI * 2.5, true)
        ctx.lineTo(600, 365)
        ctx.arc(600, 400, 35, PI * 1.5, PI * 2.5, false)
        ctx.lineTo(190, 435)
        ctx.arc(190, 400, 35, PI * 0.5, PI * 1.5, false)
        ctx.lineTo(240, 365)
        ctx.arc(240, 340, 25, PI * 0.5, PI * 1.5, true)
        ctx.lineTo(80, 315)
        ctx.arc(80, 280, 35, PI * 0.5, PI * 1.5, false)
        ctx.lineTo(60, 245)
        ctx.arc(160, 220, 25, PI * 0.5, PI * 1.5, true)
        ctx.lineTo(40, 195)
        ctx.arc(40, 160, 35, PI * 0.5, PI * 1.5, false)
        ctx.lineTo(210, 125)
        ctx.arc(210, 100, 25, PI * 0.5, PI * 1.5, true)
        ctx.fillStyle = 'rgba(41,171,226,0.2)';
        ctx.fill();
        ctx.beginPath();
        ctx.fillStyle = 'rgba(255,195,0,0.4)';
        ctx.arc(320, 100, 50, 0, PI * 2, false)
        ctx.fill();
        ctx.closePath();
        ctx.beginPath();
        ctx.fillStyle = 'rgba(41,171,226,1)';
        ctx.font = '24px cursive'
        ctx.fillText('INTERNAL SERVER ERROR', 250, 410);
        ctx.closePath();
        ctx.beginPath();
        ctx.fillStyle = 'rgba(41,171,226,1)';
        ctx.font = '20px cursive'
        ctx.fillText(alarmStr, 80, 290);
        ctx.closePath();
        ctx.beginPath();
        ctx.fillStyle = 'rgba(41,171,226,1)';
        ctx.font = '24px cursive'
        ctx.fillText('Whoops!', 260, 40);
        ctx.closePath();
        ctx.beginPath();
        ctx.arc(295, 340, 15, PI * 0.5, PI * 1.5, false)
        ctx.arc(365, 340, 15, PI * 1.5, PI * 2.5, false)
        ctx.fillStyle = 'rgba(41,171,226,0.8)';
        ctx.fill();
        ctx.font = '16px cursive';
        ctx.fillText(returnBtn, 300, 346);
        ctx.closePath();
    }
    function getPosition(e) {
        return undefined !== e.layerX ? [e.layerX, e.layerY] : [e.offsetX, e.offsetY] || new Array(2);
    }
    function cb(canvas,e) {
        const position = getPosition(e);
        if (canvas.getContext('2d').isPointInPath(...position)) {
            canvas.style.cursor = 'pointer';
            return false;
        }
        canvas.style.cursor = 'auto';
    }
    function bindEvent(canvas) {
        canvas.addEventListener('click', (e) => {
            cb(canvas,e);
        });
        canvas.addEventListener('mousemove', (e) => {
            cb(canvas,e);
        });
    }
    var canvas = document.getElementById('testStock'),
        ctx = canvas.getContext('2d'),
        PI = Math.PI,
        lang = 'zh-cn',
        returnBtn = '返回首页',
        alarmStr = '您遇到了一个未知错误（服务器内部错误），请联系技术人员寻求帮助！',
        img = new Image();
    img.onload = function () {
        ctx.drawImage(img, 180, 120, img.width, img.height);
    }
    img.src = './img/500.png';
    (lang = getLang()) === 'en' && (returnBtn = 'Home', alarmStr = 'An unknown error has been occurred. Please contact with the tech for supports!');
    draw(ctx);
    bindEvent(canvas);
</script>

</html>

效果图

generalfyx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用canvas做出自己的500页面

canvas的基本用法大家查找文档就可以了，这里只放代码，代码很简单；<!doctype html><html><head> <title>canvas</title> <meta charset="utf-8"> <style> ...
复制链接

扫一扫