Элемент canvas , который является частью HTML5, можно использовать для рисования 2D-графики «на лету» в поддерживающих браузерах. Это включает в себя возможность рисовать различные формы, такие как квадраты, прямоугольники и круги, а также возможность манипулировать изображениями.
Что интересно, вы также можете добавить текст к элементу canvas и это то, что мы собираемся рассмотреть сегодня. Сначала давайте посмотрим на некоторые основы, прежде чем мы начнем.
Чем не является холст
Canvas — это не просто заполнитель для изображений. Его содержимое отображается с использованием JavaScript. Вы можете использовать элемент canvas более одного раза в документе, и каждый элемент canvas будет встроенным узлом DOM , который затем можно использовать для создания графики в контейнере canvas .
Естественно, если вы создаете более одного элемента canvas на странице, вы можете присвоить каждому элементу canvas уникальный идентификатор, чтобы вы могли легко получить доступ к каждому элементу canvas с помощью JavaScript.
Основной элемент canvas с идентификатором выглядит следующим образом:
<canvas id="CanvasText" width="300" height="150"></canvas>
Без CSS элемент canvas отображается в виде прозрачного прямоугольного блока, размер которого можно настроить с помощью атрибутов width и height в HTML, а цвет по умолчанию при рисовании на canvas — черный.
Наша страница Настройка
Теперь, когда у нас есть базовый обзор элемента canvas , давайте рассмотрим некоторый HTML-код, который мы можем использовать в качестве базового шаблона для выполнения наших манипуляций с canvas.
<body> <canvas id="CanvasText" width="300" height="150"> </canvas> <script> var canvas = document.getElementByID('CanvasText'); if (canvas.getContext) { var context = canvas.getContext('2d'); } // rest of the code goes here... </script> </body>
Примечание. Обычно JavaScript, который вы видите выше, будет выполнен, когда мы убедимся, что DOM готов. Для краткости, мы не учитываем это здесь.
Это дает нам базовый прямоугольный холст с разрешением 300 × 150 пикселей (по умолчанию, поэтому мы можем его опустить, если захотим), и холст будет прозрачным с тонкой черной рамкой.
Рисование текста с помощью JavaScript
Вы можете использовать strokeText() или fillText() или их комбинацию для создания текста. Первый создает «заштрихованный» текст без заливки, а второй создает закрашенный текст. Вы также можете использовать любой цвет, который вы хотите, и даже использовать градиенты, если вы действительно хотите проявить творческий подход. Вам также необходимо определить свойства шрифта, например, чтобы установить размер шрифта.
JavaScript для выполнения этого будет выглядеть примерно так:
context.font = "25px Arial"; context.fillText("HTML5 Canvas Text", 10, 50);
Это будет производить текст в Arial, установленном на 25 пикселей. В последней строке используются координаты x и y (10, 50), чтобы определить, где на canvas будет располагаться текст.
Вы можете добавить цвет к тексту так:
context.fillStyle = "#000099";
Это произвело бы текст в темно-синем цвете. Вы можете fillText() со стилем в скрипте, используя комбинацию fillText() и strokeText() (которая добавляет обводку или границу к тексту) и различные цвета для создания различных эффектов. Вы также можете использовать жирный шрифт и курсив, аналогично тому, как работает сокращенное свойство шрифта CSS:
context.font="italic 25px Arial";
Вы можете изменить стиль обводки, чтобы сделать его более тяжелым; по умолчанию 1px, но это можно изменить:
context.lineWidth = 2;
Это полезно, если вы используете более крупные шрифты и разные цвета для обводки и заливки, чтобы придать немного контраста.
Больше текстового материала
Наряду с использованием координат для textAlign , где ваш текст будет отображаться на canvas , также можно использовать свойство textAlign , которое принимает одно из следующих значений:
- Начало
- Конец
- Осталось
- Правильно
- Центр
Так что это будет определено: context.textAlign = "center"; (или влево, вправо — в зависимости от того, что вы хотите изменить).
Однако, что касается текста, это меняет значение координат x и y, установленных с помощью strokeText() и fillText() , поэтому помните об этом, когда будете играть с textAlign .
Вы также можете использовать свойство textBaseline чтобы определять, где на canvas появляется текст. Его значения:
- средний
- верхний
- Дно
- Подвесная
- буквенный
- идеографический
И это будет использовано так: context.textBaseline = "middle"; ,
И имейте в виду, что если вы используете это свойство, оно будет регулировать положение обводки и заливки — при условии, что вы объявили это после определения обводки и заливки. Таким образом, вы можете получить интересный эффект со смещением обводки от заливки, если вы отрегулируете textBaseline после определения обводки, но до определения заливки.
И как это делается в CSS, вы можете добавить резервные шрифты в случае, если основной шрифт (такой как Arial, использованный выше) не доступен в системе пользователя:
context.font = "bold italic 40px Arial, Helvetica, sans serif";
Ниже вы найдете базовую демонстрацию, включающую некоторые вещи, которые мы обсуждали здесь:
Доступность и поддержка браузера
Если вы собираетесь использовать элемент canvas для отображения текста, возникнут проблемы с доступностью. Было бы целесообразно провести некоторые исследования в этой области, чтобы убедиться, что вы справляетесь с этим правильно.
Все современные браузеры поддерживают элемент canvas , даже начиная с IE9. В IE8 и более ранних версиях (при условии, что вы не заполняете ), вы можете предложить запасной контент, поместив его в теги canvas в HTML. Это может быть простая строка текста, сообщающая посетителю, что браузер не предлагает поддержку, или вы можете использовать другие методы для загрузки другого мультимедиа.
Чтобы проверить поддержку браузером всех функций, связанных с 2D-графикой, вы можете использовать тест HTML5, который дает оценку 555 баллов. Например, Firefox 27 дает общий балл 444. В разделе 2D-графики он получает 19/25, поэтому он не поддерживает все аспекты 2D-рисования, как показано ниже:
- Холст 2D графика: Да
- Поддержка текста: Да
- Поддержка пути: Нет
- Поддержка эллипса: Нет
- Пунктирная линия поддержки: Да
- Поддержка тестирования: нет
- Режимы смешивания: Да
- Поддержка PNG: да
- Поддержка JPEG: Да
- Поддержка JPEG-XR: Нет
- Поддержка WebP: Нет
Опять же, это только для Firefox 27; другие браузеры будут иметь разные результаты (например, Chrome 32 получил 503 балла в целом и 21/25 за функции 2D-графики). И, вероятно, вам не понадобятся все эти функции, поэтому не позволяйте этому помешать вам использовать canvas в своих проектах.
Если вы хотите узнать больше о том, как рисовать фигуры и текст с помощью элемента canvas , ознакомьтесь с разделом « Начало работы с HTML5 Canvas & SVG» в разделе «Learnable», посвященном основам HTML5.