Как рисовать на странице браузера

Как браузер рисует страницы

Как обрабатывается HTML, CSS и JS код перед тем, как станет веб-страницей.

Время чтения: 9 мин

Открыть/закрыть навигацию по статье

Кратко
Получение ресурсов, Fetching
Парсинг, Parsing
1. DOM
1. Render Tree
1. Глобальный и инкрементальный Layout
2. «Грязные» элементы
1. Порядок отрисовки
1. Саша Беспоясов советует
1. Что такое прогрессивный рендеринг (progressive rendering)?
Обновлено 8 марта 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

Чтобы нарисовать на экране результат работы нашего кода, браузеру нужно выполнить несколько этапов:
1. Сперва ему нужно скачать исходники.
2. Затем их нужно прочитать и распарсить.
3. После этого браузер приступает к рендерингу — отрисовке.
Каждый из процессов очень сложен, и мы не будем рассматривать их до мельчайших подробностей.

Мы лишь обратим внимание на те детали, которые необходимо знать фронтенд-разработчикам, чтобы лучше понимать, почему разные решения по-разному влияют на производительность и скорость отрисовки.

Начнём по порядку.

Получение ресурсов, Fetching

Скопировать ссылку «Получение ресурсов, Fetching» Скопировано

Ресурсы браузер получает с помощью запросов к серверу. В ответ он может получить как, например, данные в виде JSON, так и картинки, видео, файлы стилей и скриптов.

Самый первый запрос к серверу — обычно запрос на получение HTML-страницы (чаще всего index . html ).

В её коде содержатся ссылки на другие ресурсы, которые браузер тоже запросит у сервера:
```
      Document       DOCTYPE html> html lang="en"> head> link href="/style.css" rel="stylesheet"> title>Documenttitle> head> body> img src="/hello.jpg" alt="Привет!"> script src="/index.js"> script> body> html>      
```
В примере выше браузер запросит также:
- файл стилей style . css ;
- изображение hello . jpg ;
- и скрипт index . js .
Парсинг, Parsing

Скопировать ссылку «Парсинг, Parsing» Скопировано

По мере того как скачивается HTML-страница, браузер пытается её «прочитать» — распарсить.

DOM

Скопировать ссылку «DOM» Скопировано

Браузер работает не с текстом разметки, а с абстракциями над ним. Одна из таких абстракций, результат парсинга HTML-кода, называется DOM.

DOM (Document Object Model) — абстрактное представление HTML-документа, с помощью которого браузер может получать доступ к его элементам, изменять его структуру и оформление.

DOM — это дерево. Корень этого дерева — это элемент HTML, все остальные элементы — это дочерние узлы.

Для такого документа:
```
     Hello   Hello world    html> head> meta charset="utf-8"> title>Hellotitle> head> body> p class="text">Hello worldp> img src="/hello.jpg" alt="Привет!"> body> html>      
```
. получится такое дерево:

Пока браузер парсит документ и строит DOM, он натыкается на элементы типа , , , которые содержат ссылки на другие ресурсы.

Если ресурс неблокирующий (например, изображение), браузер запрашивает его параллельно с парсингом оставшейся части документа. Блокирующие ресурсы (например, скрипты) приостанавливают обработку до своей полной загрузки.

Мы можем указывать браузеру, как именно ему следует запрашивать некоторые ресурсы, например, скрипты. Это может быть полезно, когда в скрипте мы собираемся работать с элементами, которые находятся в разметке после тега :
```
 // script.jsconst image = document.getElementById('image') // script.js const image = document.getElementById('image')      
```
```
     body> script src="script.js"> script> img src="/hello.jpg" alt="Hello world" id="image"> body>      
```
В этом случае image = = = undefined , потому что браузер успел распарсить только часть документа до этого тега .

А в этом всё в порядке, изображение найдётся:
```
     body> img src="/hello.jpg" alt="Hello world" id="image"> script src="script.js"> script> body>      
```
И в этом тоже порядок, атрибут defer скажет браузеру продолжать парсить страницу и выполнить скрипт потом:
```
     body> script src="script.js" defer> script> img src="/hello.jpg" alt="Hello world" id="image"> body>      
```
CSSOM

Скопировать ссылку «CSSOM» Скопировано

Когда браузер находит элемент , который указывает на файл стилей, браузер скачивает и парсит его. Результат парсинга CSS-кода — CSSOM.

CSSOM (CSS Object Model) — по аналогии с DOM, представление стилевых правил в виде дерева.

Для документа выше с такими стилями:
```
 body  font-size: 1.5rem;> .text  color: red;> img  max-width: 100%;> body  font-size: 1.5rem; > .text  color: red; > img  max-width: 100%; >      
```
. получим такое дерево:

Чтение стилей приостанавливает чтение кода страницы. Поэтому рекомендуется в самом начале отдавать только критичные стили — которые есть на всех страницах и конкретно на этой. Так мы уменьшаем время ожидания, пока «страница загрузится».

Благодаря оптимизациям (например, сканеру предзагрузки) стили могут не блокировать чтение HTML, но они точно блокируют выполнение JavaScript, потому что в JS могут использоваться CSS-селекторы для выборки элементов.

Render Tree

Скопировать ссылку «Render Tree» Скопировано

После того как браузер составил DOM и CSSOM, он объединяет их в общее дерево рендеринга — Render Tree.

Render Tree — это термин, который используется движком WebKit, в других движках он может отличаться. Например, Gecko использует термин Frame Tree.

В итоге для нашего документа выше мы получим такое дерево:

Обратите внимание, что в Render tree попадают только видимые элементы. Если бы у нас был элемент, спрятанный через display : none , он бы в это дерево не попал. Об этом подробнее мы ещё поговорим дальше.

Общая схема парсинга выглядит вот так:

На первых шагах мы разбираемся с HTML и CSS, а затем объединяем их в Render Tree.

Вычисление позиции и размеров, Layout

Скопировать ссылку «Вычисление позиции и размеров, Layout» Скопировано

После того как у браузера появилось дерево рендеринга (Render Tree), он начинает «расставлять» элементы на странице. Этот процесс называется Layout.

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

Расчёт начинается от корневого элемента дерева рендеринга, его размеры равны размеру вьюпорта. Далее браузер переходит поочерёдно к каждому из дочерних элементов.

Важно помнить, что Layout построен на поточной модели компоновки. Это значит, что если элементы не влияют на расположение и размеры других элементов, то их положение и размеры можно просчитать за один подход.

Именно поэтому при вёрстке макетов рекомендуется «находиться в потоке» — чтобы браузеру не приходилось несколько раз пересчитывать один и тот же элемент, так страница отрисовывается быстрее.

Глобальный и инкрементальный Layout

Скопировать ссылку «Глобальный и инкрементальный Layout» Скопировано

Глобальный Layout — это процесс просчёта всего дерева полностью, то есть каждого элемента. Инкрементальный — просчитывает только часть.

Глобальный Layout запускается, например, при изменении размера окна, потому что браузеру требуется подогнать всю страницу под новый размер экрана. Это очень дорогой процесс.

Инкрементальный Layout запускает пересчёт только «грязных» элементов.

«Грязные» элементы

Скопировать ссылку ««Грязные» элементы» Скопировано

Это те элементы, которые были изменены, и их дочерние элементы.

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

Дальше браузер приступает к, собственно, отрисовке.

Непосредственно отрисовка, Paint

Скопировать ссылку «Непосредственно отрисовка, Paint» Скопировано

Во время отрисовки (Paint) браузер наполняет пиксели на экране нужными цветами в зависимости от того, что в конкретном месте должно быть нарисовано: текст, изображение, цвет фона, тени, рамки и т. д.

Отрисовка тоже бывает глобальной и инкрементальной. Чтобы понять, какую часть вьюпорта надо перерисовать, браузер делит весь вьюпорт на прямоугольные участки. Логика тут та же, как и в Layout — если изменения ограничены одним участком, то пометится «грязным» и перерисуется лишь он.

Отрисовка — это самый дорогой процесс из всех, что мы уже перечислили.

Порядок отрисовки

Скопировать ссылку «Порядок отрисовки» Скопировано

Порядок отрисовки связан со стековым контекстом.

В общих чертах, отрисовка начинается с заднего плана и постепенно переходит к переднему:
- background — color ;
- background — image ;
- border ;
- children ;
- outline .
CPU и композитинг

Скопировать ссылку «CPU и композитинг» Скопировано

И Layout, и Paint работают за счёт CPU (central process unit), поэтому относительно медленные. Плавные анимации при таком раскладе невероятно дорогие.

Для плавных анимаций в браузерах предусмотрен композитинг (Compositing).

Композитинг — это разделение содержимого страницы на «слои», которые браузер будет перерисовывать. Эти слои друг от друга не зависят, из-за чего изменение элемента в одном слое не затрагивает элементы из других слоёв, и перерисовывать их становится не нужно.

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

Применение таких свойств, как, например, transform , «выносит» элемент на отдельный композитный слой, где положение элемента не зависит от других и не влияет на них.

Чтобы узнать, вызывает ли конкретное CSS-свойство композитинг и перерисовку в браузере, воспользуйтесь инструментом «CSS Triggers».

Перерисовка, Reflow (relayout) и Repaint

Скопировать ссылку «Перерисовка, Reflow (relayout) и Repaint» Скопировано

Процесс отрисовки — циклический. Браузер перерисовывает экран каждый раз, когда на странице происходят какие-то изменения.

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

Один цикл обновления — это animation frame.

Зная «расписание отрисовки» браузера, мы можем «предупредить» его, что хотим запустить какую-то анимацию на каждый новый фрейм. Это можно сделать с помощью request Animation Frame ( ) .
```
 const animate = () =>  // Код анимации> const animate = () =>  // Код анимации >      
```
Эта функция запускает новый кадр анимации: обновляет какое-то свойство или перерисовывает canvas.

Если мы хотим добиться плавной анимации, используя функцию выше, мы должны обеспечить в среднем 60 обновлений экрана за секунду (60 fps — frames per second).

Это можно сделать топорно, через интервал:
```
 // 60 раз в 1000 миллисекунд, приблизительно 16 мс.const intervalMS = 1000 / 60setInterval(animate, intervalMS) // 60 раз в 1000 миллисекунд, приблизительно 16 мс. const intervalMS = 1000 / 60 setInterval(animate, intervalMS)      
```
Либо использовать window . request Animation Frame ( ) :
```
 window.requestAnimationFrame(animate) window.requestAnimationFrame(animate)      
```
Интервалы не всегда запускаются в нужный момент. set Interval ( ) не учитывает, на какой стадии отрисовки находится страница, и в итоге кадры отрисовки могут быть рваными или дёрганными.

С интервалом анимация может быть рваной, потому что перерисовка может быть запущена в неподходящее время.

А если вкладка была неактивна, то интервал может «попытаться догнать время», и несколько кадров запустятся разом:

С request Animation Frame ( ) анимация плавнее, потому что браузер знает, что в следующем фрейме надо запустить новый кадр анимации.

Она не гарантирует, что анимация будет запущена строго раз в 16 мс, но значение будет достаточно близким.

На практике

Скопировать ссылку «На практике» Скопировано

Саша Беспоясов советует

Скопировать ссылку «Саша Беспоясов советует» Скопировано

Для динамики всегда используйте transform и opacity , избегайте изменения остальных свойств (типа left , top , margin , background и так далее).

Таким образом вы дадите браузеру возможность оптимизировать отрисовку, отчего страница станет отзывчивее.

Для анимаций, которые необходимо перерисовывать на каждый фрейм, используйте request Animation Frame ( ) .

Это сделает тяжёлую анимацию менее рваной.

На собеседовании

Скопировать ссылку «На собеседовании» Скопировано

Что такое прогрессивный рендеринг (progressive rendering)?

Скопировать ссылку «Что такое прогрессивный рендеринг (progressive rendering)?» Скопировано

Скопировать ссылку «Марина Дорошук отвечает» Скопировано

Чтобы понять что такое progressive rendering, нужно понимать отличие client-side rendering от server-side rendering.

При client-side rendering (CSR) контент отрисовывается на стороне клиента (в браузере). Такой подход используется в React, когда браузеру отсылается практически пустой HTML-документ, а потом запускается скрипт, который генерирует HTML в указанном скрипту теге. Как правило это . Пользователь будет видеть пустую страницу, пока JS-файл полностью не загрузится.

При server-side rendering (SSR) HTML-разметка генерируется на сервере, отсылается браузеру и после этого отрисовывается на клиенте. Пользователь увидит контент сразу же, но не сможет взаимодействовать со страницей, пока не загрузится JS-файл.

При использовании прогрессивного рендеринга, кусочки HTML генерируется на сервере и отсылаются браузеру в порядке их приоритетности. То есть, элементы с самым высоким приоритетом (например , фон, главная интерактивная часть страницы) генерируются на сервере, отсылаются браузеру и отрисовываются в первую очередь. Это позволяет пользователю увидеть самый важный контент как можно скорее, не дожидаясь полной загрузки всего контента. То есть, progressive rendering что-то среднее между client-side rendering и server-side rendering.

Техники реализации прогрессивного рендеринга:
1. Ленивая загрузка (Lazy Loading). Загрузка контента по мере необходимости. Например, если страница достаточно большая, не нужно загружать изображения вне вьюпорта. Загрузка изображения стартует за некоторое время до того как она появится во вьюпорте. Эту же технику можно использовать для загрузки контента изначально скрытых элементов. Например, можно загрузить контент закрытого меню когда пользователь наводит курсор на кнопку открытия.
2. Приоритизация контента. Например, не загружать изначально все CSS-стили. Добавлять в загрузку только тех стилей, которые нужны для текущей видимой области HTML-документа. Остальные стили можно добавить в .
Советы по Windows 10: записки на веб-страницах в Microsoft Edge

А вы знали, что в браузере Microsoft Edge можно писать прямо на веб-страницах, после чего заметками легко поделиться с друзьями и коллегами или сохранить?

Microsoft Edge – единственный браузер со встроенным функционалом веб-заметок, позволяющим рисовать, подчеркивать, выделять фрагменты содержимого цветом. Если у вас устройство с сенсорным экраном, вашим пером станет палец или активный стилус. При работе на ПК или ноутбуке воспользуйтесь мышкой или трекпадом.

Вот как работает рисование на веб-страницах в Microsoft Edge:

Чтобы начать рисовать, откройте Microsoft Edge и кликните в правом верхнем углу иконку с карандашом «Создать веб-заметку». Выберите «Перо», «Маркер» или «Создать заметку» и начинайте писать или рисовать. Сделав все, что вы хотели, кликните «Сохранить веб-замету» или «Поделиться веб-заметкой» (в меню справа) и выберите нужные опции. Как вариант, можно нажать иконку с ножницами «Обрезать», выделить фрагмент, и он будет скопирован в буфер обмена. Попробуйте!

Как писать и рисовать на веб-страницах в браузере Microsoft Edge

Microsoft Edge — единственный браузер, который позволяет рисовать на веб-страницах, стирать, добавлять заметки, выделять текст и другие элементы, а также копировать любую часть веб-страницы.

Все свои пометки можно сохранить и поделиться ими с друзьями всеми стандартными способами. Делайте заметки при подготовке к урокам, выделяйте текст во время поиска важной информации или дорисовывайте усы знаменитостям, поскольку Интернет становится вашим полотном.

Запустите браузер Microsoft Edge, зайдите на нужную страницу в Интернете.
Нажмите на панели кнопку Создать веб-заметку (в правом верхнем углу), чтобы дополнить текущую страницу.

Появится новое меню фиолетового цвета на котором присутствуют следующие инструменты.

1) Перо
2) Маркер
3) Ластик
4) Добавить заметку
5) Обрезать
6) Сохранить веб-заметку
7) Поделиться веб-заметкой
8) Выход

Используйте инструмент Перо, чтобы рисовать на экране. Можно выбрать цвет и размер пера.

Используйте инструмент Маркер для выделения текста или других элементов на экране. Также можно выбрать цвет и размер маркера.

Инструмент Ластик позволяет удалить ваши пометки с экрана. Выберите инструмент Ластик, нажмите на любую пометку и она исчезнет. Есть функция позволяющая очистить весь рукописный ввод.

С помощью инструмента Добавить заметку можно оставить любой комментарий к записи или изображению в любом месте веб-страницы.

Инструмент Обрезать, позволяет скопировать любую часть страницы в буфер обмена, а затем вставить в любой документ (например word), презентацию или просто сделать изображение и использовать его в своих целях.

С помощью кнопки Сохранить веб-заметку можно сохранить ваше творение в OneNote, Избранное или Список чтения в Microsoft Edge. В любое время вы можете открыть веб-заметку, внести в нее дополнения или же удалить.

Вы также можете поделиться своей веб-заметкой, отправив ее по почте, разместить в социальной сети, в OneNote или отправить ее на печать с помощью кнопки Поделиться веб-заметкой.

Кнопка Выход позволяет выйти из режима редактирования.

Делать заметки и рисовать на веб-страницах можно и с использованием стилуса.
С помощью Microsoft Edge действительно просто и удобно писать и рисовать на веб-страницах. И помните, что браузер Microsoft Edge доступен исключительно для пользователей Windows 10.

Основы рисования

Canvas — API для рисования, недавно добавленный в HTML и поддерживается большинством браузеров (даже Internet Explorer 9). Canvas позволяет рисовать всё, что вы хотите прямо в браузере без использования плагинов, вроде Flash или Java. Canvas с его обманчиво простым API может революционно преобразовать создание веб-приложений для всех устройств, а не только десктопных.

Эти скриншоты позволят вам почувствовать вкус возможностей Canvas.

Что такое Canvas?

Canvas — API для двумерного рисования. По сути браузер даёт вам прямоугольную область на экране, в которой вы можете рисовать линии, фигуры, изображения, текст, практически всё что хотите. Canvas первоначально был создан Apple для их виджетов, но с тех пор был принят всеми разработчиками основных браузеров и теперь Canvas является частью спецификации HTML5. Вот небольшой пример, как выглядит некоторый код Canvas:
```
   var canvas = document.getElementById('canvas'); var c = canvas.getContext('2d'); c.fillStyle = "red"; c.fillRect(100,100,400,300);  
```
Простой красный прямоугольник

Данный прямоугольник нарисован функцией context.fillRect() .

Важно понимать, что Canvas предназначен для рисования пикселями. В нём нет фигур или векторов. Нет объектов для связывания с обработчиками событий. Это просто рисунки пикселями на экране. Как мы ещё увидим в этом и сила и слабость.

Как это связано с другими веб-технологиями?

Есть четыре способа нарисовать что-либо на веб-странице: Canvas, SVG, CSS и прямая анимация через DOM. Canvas содержит отличия от остальных трёх.

SVG — это API для рисования векторных фигур. Каждая фигура представляет собой объект, который вы можете связать с обработчиками событий. При масштабировании фигуры остаются сглаженными, в то время как в Canvas заметны пиксели.

CSS в реальности предназначен для стилизации элементов. Поскольку DOM не содержит никаких объектов, которые рисуются в Canvas, вы не можете использовать CSS для их стилизации. CSS будет влиять только на прямоугольную площадь самого Canvas, так что вы можете установить границы, цвет фона и на этом всё.

Анимация через DOM: DOM или Document Object Model (объектная модель документа) определяет каждый объект на экране. Анимация с помощью CSS или JavaScript для передвижения объектов в некоторых случаях может быть более плавной, чем сделанной через Canvas, но это зависит от реализации вашего браузера.

Что? Где? Когда?

Итак, когда следует использовать Canvas вместо SVG, CSS или элементов DOM? Ну, Canvas по уровню ниже, чем другие, так что у вас больше контроля над рисованием и тратится меньше памяти, но взамен нужно писать больше кода. Используйте SVG, когда у вас имеются фигуры, которые вы хотите отобразить на экране, как на карте сделанной в Adobe Illustrator. Используйте CSS или DOM-анимацию, когда у вас есть большие статические области, которые вы хотите анимировать или желаете использовать трёхмерные преобразования. Для схем, графиков, динамических диаграмм и, конечно, видеоигр, Canvas — наилучший выбор. В дальнейшем мы обсудим несколько библиотек, которые позволяют делать вам больше штук, ориентированных на векторы и объекты, используя Canvas.

Прежде чем двигаться дальше, хочу пояснить, что когда я говорю о Canvas, то подразумеваю двумерный API. Также существует трёхмерный API в работах называемых WebGL. Я не собираюсь о нём рассказывать, потому что он всё ещё находится в разработке и браузеры поддерживают его довольно плохо. Также этот по существу OpenGL от JavaScript находится на более низком уровне чем Canvas и гораздо сложнее в использовании. Когда WebGL станет более зрелым, мы вернёмся к нему в следующих главах.

Поддержка в браузерах

И, наконец, прежде чем мы углубимся в работу с Canvas, давайте поговорим о том, где вы можете его использовать. К счастью Canvas это теперь стабильный API и большинство современных браузеров поддерживают его в некоторой мере. Поддерживает даже Internet Explorer начиная с версии 9 и очень хорошо.

9 10 9 3 4

Большинство мобильных платформ поддерживают Canvas, потому что в основном они основаны на WebKit, который уже давно имеет хорошую поддержку. Я знаю, что поддерживает WebOS, iOS, Android. Считаю, что BlackBerry тоже, по крайней мере, на PlayBook. Windows Phone 7 не поддерживает, но это может измениться в будущем обновлении.

iOS webOS Android BlackBerry Windows Phone 7

все все 2 PlayBook и OS 6.0

Пока не все мобильные устройства содержат полную или быструю поддержку Canvas, поэтому позже мы рассмотрим, как оптимизировать наш код для мобильных устройств.

Простое рисование

Как я уже говорил ранее, Canvas — это просто API. Если вы уже делали работу с программированием на Flash или Java 2D, то это должно показаться довольно знакомым. Вы получаете указатель на графический контекст, устанавливаете некоторые свойства, такие как цвет текущей заливки или контура и затем рисуете несколько фигур. Вот некоторые примеры.

В данном примере мы устанавливаем текущий цвет красным и рисуем прямоугольник. Перетащите мышью числа в коде для изменения значений и посмотрите, как это влияет на прямоугольник.
```
ctx.fillStyle = "red"; //x, y, ширина, высота ctx.fillRect(20,30,40,50);
```
```
c.fillStyle = '#ccddff'; c.beginPath(); c.moveTo(50,20); c.lineTo(200,50); c.lineTo(150,80); c.closePath(); c.fill(); c.strokeStyle = 'rgb(0,128,0)'; c.lineWidth = 5; c.stroke();
```
В этом примере мы устанавливаем текущий цвет заливки, создаём контур, а затем заливаем и обводим его. Следует отметить, что контекст отслеживает цвет заливки и цвет обводки отдельно. Также обратите внимание на разные формы указания цвета. fillStyle и strokeStyle может быть любым корректным цветом из CSS, таким как шестнадцатеричным, названием или функцией rgb() .

Контуры

Canvas напрямую поддерживает только прямоугольник. Чтобы нарисовать любую другую фигуру необходимо сделать это самостоятельно с помощью контуров. Контуры это фигуры, созданные кучей прямых или изогнутых отрезков линий. В Canvas вы должны вначале определить контур через beginPath() , затем залить его или использовать как маску. Вы определяете каждый отрезок такими функциями как moveTo() , lineTo() и bezierCurveTo() . В данном примере фигура рисуется с помощью moveTo() , затем идёт кривая Безье и несколько линий. После создания контура он заливается и обводится.
```
c.fillStyle = 'red'; c.beginPath(); c.moveTo(10,30); c.bezierCurveTo(50,90,159,-30,200,30); c.lineTo(200,90); c.lineTo(10,90); c.closePath(); c.fill(); c.lineWidth = 4; c.strokeStyle = 'black'; c.stroke();
```
Система координат

Пара слов о системе координат. Canvas ведёт отсчёт от левого верхнего угла с осью у, которая ведёт вниз. Это традиционно для компьютерной графики, но если вы хотите указать другую точку отсчёта, то можете сделать это через трансформацию, о которой мы расскажем позже. Ещё одна важная вещь — спецификация определяет координаты в левом верхнем углу пикселя. Это означает, что если вы рисуете вертикальную линию шириной в один пиксель, начиная с 5.0, то на самом деле это охватывает половину соседних пикселей (от 4.5 до 5.5). Чтобы обойти это сместите ваши координаты по оси х на 0.5. Тогда это даст вам линию, которая идёт с 5.0 до 6.0. В качестве альтернативы вы можете использовать ширину линии, указав 2 или 4.

Изображения

Canvas может выводить изображения через функцию drawImage .

Есть несколько форм drawImage . Вы можете нарисовать изображение непосредственно на экране в обычном масштабе или растянуть и обрезать его, как вам нравится. Обрезка и растяжение изображений может быть очень удобны для создания спецэффектов в играх, потому что интерполяция изображения часто работает намного быстрее, чем другие типы масштабирования.
```
ctx.drawImage(img, 0,0); //normal drawing ctx.drawImage(img, //draw stretched 0,0,66,66, //source (x,y,w,h) 100,0,103,100//destination (x,y,w,h) ); ctx.drawImage(img, //draw a slice 20,10,20,20, //source coords (x,y,w,h) 250,0,250,50//destination coords (x,y,w,h) );
```
Попробуйте поменять переменные, чтобы увидеть, как работает растяжение и обрезка. Чтобы растянуть изображение вы должны указать исходные и конечные координаты. Исходные координаты говорят drawImage какие пиксели взять из изображения. Поскольку рисунок выше имеет размеры 67×67 пикселей, то используя 0,0,66,66 мы отобразим изображение целиком. Конечные координаты говорят drawImage куда поместить пиксели на экране. Изменяя значения w и h можно растянуть и сжать изображение.

Обрезка работает аналогично, но используются исходные координаты, которые не охватывают изображение целиком. Когда вы берёте фрагмент изображения убедитесь, что вы не выходить за его исходные границы, иначе изображение исчезнет.

Текст

Canvas может также рисовать текст. Атрибуты шрифта такие же, как и в аналоге CSS, так что вы можете установить стиль, размер и семейство шрифта. Обратите внимание, что функция fillText(строка,x,y) использует базовую линию текста, а не его верхний край. Если вы поместите ваш текст в 0,0, то он нарисуется за пределами верхней части экрана. Так что опустите y на соответствующее значение.
```
ctx.fillStyle = "black"; ctx.font = "italic "+96+"pt Arial "; ctx.fillText("this is text", 20,150);
```
Градиенты

Canvas может заливать фигуры градиентом вместо цвета. Вот линейный градиент:
```
var grad = ctx.createLinearGradient(0,0,200,0); grad.addColorStop(0, "white"); grad.addColorStop(0.5, "red"); grad.addColorStop(1, "black"); ctx.fillStyle = grad; ctx.fillRect(0,0,400,200);
```
Важно отметить, что градиент закрашивается в той же системе координат, какой рисуется фигура, а не внутренних координат фигуры. В данном примере фигура рисуется в 0,0. Если мы изменим фигуру на 100,100, то градиент будет по-прежнему находиться в начале экрана, так что окажется меньше градиента, вроде этого:
```
var grad = ctx.createLinearGradient(0,0,200,0); grad.addColorStop(0, "white"); grad.addColorStop(0.5, "red"); grad.addColorStop(1, "black"); ctx.fillStyle = grad; ctx.fillRect(100,100,400,200);
```
Итак, в случае, когда вы считаете, что заливаете фигуру градиентом, но видите единственный цвет, то это может быть потому, что ваши координаты выключены.

Вот и все основы рисования. Давайте остановимся на достигнутом и выполним несколько упражнений в следующей главе. У вас уже должен быть установлен браузер и текстовый редактор. Я рекомендую использовать Chrome, поскольку он содержит хорошие инструменты отладки и jEdit, потому что он бесплатный и кросс-платформенный. Но вы можете использовать браузер и редактор по своему усмотрению.

Автор: Джош Мариначи
Последнее изменение: 05.08.2023
- Основы рисования
- Практика: создание диаграмм
- Продвинутое рисование и события
- Анимация
- Создание игры
- Буферы пикселей и другие эффекты
- 3D-графика через WebGL и ThreeJS
- WebGL-практикум с ThreeJS: 3D автомобиль
- Введение в WebAudio
- Доступ к веб-камере через getUserMedia()
- Реальные примеры и инструменты
- Мобильные устройства и оптимизация производительности
Похожие публикации: