<canvas>

Тег для рисования графики и анимаций прямо в браузере!

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Тег <canvas> добавляет растровый холст на страницу. Этот холст можно использовать для отрисовки 2D- или 3D-графики, анимаций, видео.

Пример

Секция статьи "Пример"
        
          
          <canvas width="300" height="300"></canvas>
          <canvas width="300" height="300"></canvas>

        
        
          
        
      

На случай, если браузер не поддерживает тег или у пользователя выключен JavaScript, можно добавить альтернативный контент:

        
          
          <canvas width="300" height="300">  <p>    Альтернативный контент для старых браузеров и для тех у кого выключен JavaScript  </p></canvas>
          <canvas width="300" height="300">
  <p>
    Альтернативный контент для старых браузеров и для тех у кого выключен JavaScript
  </p>
</canvas>

        
        
          
        
      

Однако все современные браузеры поддерживают тег <canvas>, так что альтернативный контент скорее пригодиться для тех пользователей, которые сознательно отключают JavaScript или для тех кто не может увидеть то, что вы отображаете на <canvas>. Например, мы можем нарисовать на холсте невероятно крутую анимацию прогноза погоды, однако для пользователей со скринридерами мы оставим внутри тега доступную для них информацию:

        
          
          <canvas id="weather-screen" width="300" height="300">  <h1>Прогноз погоды в Н-ске на сегодня, 4 мая 2022 года</h1>  <p>    Погода ожидается малооблачная с кучевыми облаками и прохладная. Вероятность осадков 50%. Атмосферное давление в пределах нормы (758—759 мм рт.ст.). Температура воздуха +15...+16°C. Ветер слабый (1 м/с). Относительная влажность 67—70%.  </p></canvas>
          <canvas id="weather-screen" width="300" height="300">
  <h1>Прогноз погоды в Н-ске на сегодня, 4 мая 2022 года</h1>
  <p>
    Погода ожидается малооблачная с кучевыми облаками и прохладная. Вероятность осадков 50%. Атмосферное давление в пределах нормы (758—759 мм рт.ст.). Температура воздуха +15...+16°C. Ветер слабый (1 м/с). Относительная влажность 67—70%.
  </p>
</canvas>

        
        
          
        
      

Важно понять, что даже если альтернативный контент визуально не отображается на странице, то он всё ещё присутствует в DOM и доступен для вспомогательных технологий. Это является отличным инструментом для создания, например, доступных графиков. Однако поместив в альтернативный контент интерактивный элемент (кнопку, ссылку и т.д.) разработчик может неосознанно внести путаницу для пользователя, так как этот элемент будет доступен с клавиатуры, но при этом пользователь не увидит ни элемента ни индикатора фокуса. Если разработчик помещает интерактивный элемент в зону альтернативного контента, то он должен предусмотреть то, как будет вести себя фокус на странице при перемещении между элементами.

Как пишется

Секция статьи "Как пишется"

Тег <canvas> парный и обязательно требует закрывающего тега, иначе весь контент после будет расценён браузером как фолбэк.

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

Атрибуты width и height не обязательные. По умолчанию, если не указать размеры, браузеры создадут холст размером 300 на 150 пикселей.

К тегу можно применить все глобальные атрибуты.

Как понять

Секция статьи "Как понять"

Тег <canvas> сам по себе не несёт никакого смысла. Это просто холст для отрисовки растровой графики. Но он предоставляет нам доступ к Canvas API и WebGL API в JavaScript. С помощью этих API вы можете получить доступ к каждому отдельному пикселю в пределах холста и управлять его цветом в отдельности от других пикселей.

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

Ещё примеры

Секция статьи "Ещё примеры"

Пример использования Canvas API:

Открыть демо в новой вкладке

Пример использования WebGL API:

Открыть демо в новой вкладке