HTML Canvas и библиотеки для работы с ним

Холсты в HTML

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

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

Чтобы использовать Canvas, необходимо создать элемент <canvas> в HTML и задать ему размеры. В JavaScript для работы с ним используется метод getContext('2d').

Пример простого Canvas:


JavaScript предоставляет API для рисования на холсте. Вы можете использовать этот API для рисования форм, текста, растровых изображений и других элементов на холсте. Пример кода:


 

1. Создание элемента Canvas

  • width и height: задают размеры области для рисования.
  • getContext('2d'): создает 2D-контекст для рисования.

2. Прорисовка фигур

Прорисовка фигур

Для прорисовки фигур в Canvas используются методы для рисования прямоугольников, линий, дуг и кривых.

Для этого используются методы контекста.

Основные методы рисования:

  • ctx.fillRect(x, y, width, height) — рисует заполненный прямоугольник.

  • ctx.strokeRect(x, y, width, height) — рисует только контур прямоугольника.

  • ctx.clearRect(x, y, width, height) — очищает часть холста.

  • ctx.beginPath() — начинает новый путь для рисования.

  • ctx.moveTo(x, y) — перемещает "перо" в новую точку.

  • ctx.lineTo(x, y) — рисует линию от текущей точки до новой точки.

  • ctx.stroke() — применяет обводку текущего пути.

  • ctx.fill() — заполняет текущий путь.


 Круги

  • arc(x, y, radius, startAngle, endAngle, anticlockwise): рисует часть круга или полный круг.

Пример:

Прямоугольники

  • fillRect(x, y, width, height): рисует заполненный прямоугольник.
  • strokeRect(x, y, width, height): рисует только контур прямоугольника.
  • clearRect(x, y, width, height): очищает часть холста.

Пример:

3. Заливка и очистка

Для заливки фигур и очистки области Canvas используются методы:

  • ctx.fillStyle = 'color' — задаёт цвет заливки.

  • ctx.fillRect(x, y, width, height) — рисует заполненный прямоугольник.

  • ctx.clearRect(x, y, width, height) — очищает область на холсте.

Пример:

4. Прорисовка текста

Для вывода текста в Canvas используются методы:

  • ctx.font = 'font-size font-family' — задаёт стиль текста.

  • ctx.fillText(text, x, y) — рисует заполненный текст.

  • ctx.strokeText(text, x, y) — рисует обводку текста.

Пример вывода текста:

5. Использование прозрачности и шаблонов

Прозрачность

Прозрачность и шаблоны позволяют создавать визуально сложные эффекты.

Прозрачность

  • ctx.globalAlpha = value — задаёт глобальную прозрачность всех последующих элементов (значение от 0 до 1).

  • ctx.fillStyle = 'rgba(r, g, b, alpha)' — задаёт прозрачный цвет для конкретного элемента.

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

Шаблоны (Patterns)

Шаблоны позволяют использовать изображения или другие графические элементы для заливки фигур.

  • ctx.createPattern(image, repetition) — создаёт узор из изображения (повторение: 'repeat', 'repeat-x', 'repeat-y', 'no-repeat').

Пример шаблона:

6. Градиенты в Canvas

Градиенты позволяют плавно переходить от одного цвета к другому. В Canvas можно использовать два типа градиентов:

  • Линейный градиент (createLinearGradient(x0, y0, x1, y1)) — от одной точки до другой.

  • Радиальный градиент (createRadialGradient(x0, y0, r0, x1, y1, r1)) — от одного круга к другому.

Пример линейного градиента:


📘 Радиальный градиент

7. Примеры

📘 Пример 1: Рисование фигуры с градиентом и текстом



📘 Пример 2: Круг с прозрачностью и градиентом



  • Canvas — это мощный инструмент для рисования графики на веб-странице с помощью JavaScript.
  • Мы можем рисовать фигуры, добавлять заливку и контуры, прорисовывать текст, использовать прозрачность, градиенты и шаблоны.
  • Умение работать с Canvas открывает возможности для создания динамических и интерактивных элементов, таких как игры, графики, анимации и другие визуальные эффекты.
Последнее изменение: вторник, 25 ноября 2025, 21:18