【canvas动画】黑客帝国代码雨

admin

2020-11-05 23:00:01 阅读 2002

效果展示

下载.png

预览地址

黑客帝国代码雨

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html, body, canvas {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

        canvas {
            background: #000;
        }
    </style>
</head>
<body>
    <canvas id="mycan">
        YOUR BROWSER CANNOT SUPPORT CANVAS
    </canvas>
    <script>
        var can = document.getElementById('mycan')
        var ctx = can.getContext('2d')
        can.width = window.innerWidth
        can.height = window.innerHeight

        function init(ctx, txt) {
            const FONTSIZE = 20
            const FONTCOLOR = 'green'
            const MASKCOLOR = 'rgba(0, 0, 0, 0.05)'
            const W = ctx.canvas.width
            const H = ctx.canvas.height

            var tIndex = 0
            var tLen = txt.length
            var arr = []

            function genRandomY() {
                return Math.round(Math.random() * H  * 0.5) + FONTSIZE
            }

            for (let i = 0; i < W; i += FONTSIZE) {
                arr.push({x: i, y: genRandomY()})
            }

            function anime() {
                var t = txt[tIndex++ % tLen]

                ctx.fillStyle = FONTCOLOR
                arr.forEach(function(ele) {
                    ctx.fillText(t, ele.x, ele.y)
                    ele.y += FONTSIZE
                    if (ele.y > H) ele.y = genRandomY()
                })

                ctx.fillStyle = MASKCOLOR
                ctx.rect(0, 0, W, H)
                ctx.fill()

                requestAnimationFrame(anime)
            }

            anime()
        }

        init(ctx, '爱前端IFRONT.NET')
    </script>
</body>
</html>

关于作者

admin

admin@ifront.net

获得点赞 173

文章阅读量 242098

文章标签

JavaScript Canvas