Как мне вставить текст под визуализатором? - PullRequest
Новая
       6

Как мне вставить текст под визуализатором?

0 голосов
/ 07 марта 2019

Создание обоев для движка обоев, и все работает отлично. Я просто пытаюсь поместить текст в середину экрана. Изменение отступов и полей, похоже, не помогло. Если что-нибудь, я хочу текст чуть ниже верхнего визуализатора.

Вот мой код: 

    <!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>
...