Как я могу написать текст поверх анимации холста - PullRequest
Новая
       1

Как я могу написать текст поверх анимации холста

0 голосов
/ 21 февраля 2019

Итак, я создаю онлайн-профиль для себя и изучаю, как сделать целевую страницу максимально привлекательной.Наткнулся на HTML5 Canvas, провел некоторые исследования и эксперименты по созданию интерактивного фона, и вот результат (в codepen).

Теперь я хотел бы написать свое имя в середине холста с текстомперед анимацией.

Анимация вызывается в рекурсивном цикле, а функция инициализации вызывается при изменении размера или обновления страницы.

Проблема в том, что я не могу получить текст переди по какой-то странной причине мой текст уменьшается при изменении размера страницы.

Вот моя ручка

https://codepen.io/hamza-tariq-khan/pen/mzKMNd

<!doctype html5>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Canvas Resize</title>
    <style>
        canvas{
            /* border: 1.5px solid black; */
            /* background-color: red; */
            display: block;
        }

        body{
            margin: 0;
            overflow-x: hidden;
        }

        .wrapper{
            margin : 20px;
        }

    </style>


</head>
<body>
    <canvas></canvas>
    <script src="script.js"></script>

    <div class="wrapper">
        <h1>This is a sample sentence</h1>
    </div>



</body>
</html>

, и это идеячего я хочу достичь(надпись Мэтью Уильямса перед движущимся фоном)

http://findmatthew.com

1 Ответ

0 голосов
/ 21 февраля 2019

На вашем месте я бы пропустил рендеринг текста на холсте и применил к CSS div некоторые правила CSS, чтобы он отображался сверху.Подход CSS улучшает производительность , а также улучшает доступность.Слепой человек, использующий программу чтения с экрана, сможет выяснить, что находится в div, но чтение текста в canvas не поддерживается.Самое главное, что гораздо проще рассуждать о HTML и CSS, чем рассуждать о визуализации текста в элементе canvas.Как часто вы будете это делать?Когда вы вернетесь, чтобы изменить код через месяц, шесть месяцев или год, вам будет легче изменить HTML / CSS, чем заново продумывать логику рендеринга Canvas!

Для этого используйте следующий CSS для div wrapper: 

.wrapper{
    position: absolute;
    top: 0px;
    color: red;
    font-size: 60px;
    margin : 20px;
}

position: absolute позволяет div перекрывать холст, а свойства top, bottom, left иright позволяет вам контролировать, как далеко смещение div от краев его родителя (в этом случае wrapper является дочерним для body).Я изменил цвет и размер шрифта, чтобы было очевидно, что он работает.

А вот ссылка на рабочий пример: https://codepen.io/anon/pen/LqoroR

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...