Question

为墙纸引擎制作墙纸，并且一切正常，我只是想在屏幕中间放置一些文本。更改填充和边距似乎无济于事。如果需要的话，我想在顶部可视化工具下方显示文字。

这是我的代码：

    <!DOCTYPE html>
<html>
    <head>
        <title>wallpaper</title>
        <style>
            html, body {
                width: 100vw;
                height: 50vh;
                margin-top: 0px;
                padding: 0;
                overflow: hidden;
                background: #222;
            }
            #heck {
                margin-top: 900px;
            }
        </style>
        <script>
        window.addEventListener('load', _ => {
            let audio = []

            const bar = {
                widht: window.innerWidth / 128 - 8,
                height: 100,
                padding: 8
            }

            const canvas = document.createElement('canvas')
            const context = canvas.getContext('2d')

            canvas.width = window.innerWidth
            canvas.height = window.innerHeight

            document.body.appendChild(canvas)

            const listener = arr =>{
                audio = arr
            }

            const draw = _ => {
                context.fillStyle = 'yellow'
                context.clearRect(0, 0, window.innerWidth, window.innerHeight)

                for (const [i, part] of audio.entries()) {
                    const x = (i * bar.widht) + ((i + 1) * bar.padding) - (bar.padding / 2)
                    const y = 4
                    context.fillRect(x, y, bar.widht, bar.height * part)
                }

                requestAnimationFrame(draw)
            }

            window.wallpaperRegisterAudioListener(listener)
            draw()
        })

        </script>
    </head>
    <body>

        <h1 class="heck">Heck</h1>
    </body>
</html>

如何将文本推送到可视化器下方？

0 个答案: