Как рисовать в JavaScript Canvas: основы и примеры

Как рисовать в JavaScript Canvas: основы и примеры
Изучите основы рисования на Canvas в JavaScript. Подробные примеры создания графики, фигур и анимации с использованием HTML5 Canvas API.

Введение в мир Canvas

Canvas — это удивительный инструмент HTML5, который позволяет нам рисовать прямо в браузере с помощью JavaScript. Представьте, что у вас есть цифровой холст, на котором вы можете создавать любые изображения, анимации и даже игры! Давайте вместе сделаем первые шаги в этом увлекательном мире.

Создаем наш первый Canvas

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

  1. Откройте ваш HTML-файл.
  2. Внутри тега <body> добавьте следующую строку:

<canvas id="myCanvas" width="500" height="300"></canvas>

Здесь мы создали элемент canvas шириной 500 пикселей и высотой 300 пикселей. Атрибут id="myCanvas" нужен, чтобы мы могли легко найти наш холст с помощью JavaScript.

Подготовка к рисованию

Теперь, когда у нас есть холст, давайте подготовимся к рисованию:

  1. В вашем JavaScript-файле (или внутри тега <script>) добавьте следующий код:

// Находим наш холст
const canvas = document.getElementById('myCanvas');

// Получаем контекст для рисования
const ctx = canvas.getContext('2d');
  • Мы находим наш холст по id, который задали в HTML.
  • Затем получаем «контекст» для рисования. Думайте о нем как о наборе инструментов художника.

Рисуем наш первый прямоугольник

Давайте нарисуем простой синий прямоугольник:


// Выбираем цвет заливки
ctx.fillStyle = 'blue';

// Рисуем прямоугольник
ctx.fillRect(10, 10, 100, 50);

Разберем этот код:

  • fillStyle = 'blue' — мы выбираем синий цвет для заливки.
  • fillRect(10, 10, 100, 50) — рисуем заполненный прямоугольник:
  • 10, 10 — координаты верхнего левого угла (x, y)
  • 100 — ширина прямоугольника
  • 50 — высота прямоугольника

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

Рисуем контур прямоугольника

А теперь давайте нарисуем прямоугольник с контуром:


// Выбираем цвет контура
ctx.strokeStyle = 'red';

// Устанавливаем толщину линии
ctx.lineWidth = 3;

// Рисуем контур прямоугольника
ctx.strokeRect(130, 10, 100, 50);

Здесь мы использовали:

  • strokeStyle = 'red' — выбор красного цвета для контура.
  • lineWidth = 3 — установка толщины линии в 3 пикселя.
  • strokeRect(130, 10, 100, 50) — рисование контура прямоугольника.

Рисуем линии

Теперь давайте нарисуем простую линию:


// Начинаем новый путь
ctx.beginPath();

// Перемещаем "карандаш" в начальную точку
ctx.moveTo(50, 100);

// Рисуем линию до конечной точки
ctx.lineTo(200, 100);

// Устанавливаем цвет линии
ctx.strokeStyle = 'green';

// Рисуем линию
ctx.stroke();

Этот код:

  1. Начинает новый путь с beginPath().
  2. Перемещает «карандаш» в точку (50, 100).
  3. Рисует линию до точки (200, 100).
  4. Устанавливает зеленый цвет для линии.
  5. Отображает линию на холсте с помощью stroke().

Рисуем круг

Рисование круга немного сложнее, но мы справимся:


// Начинаем новый путь
ctx.beginPath();

// Рисуем круг
ctx.arc(300, 150, 50, 0, 2 * Math.PI);

// Выбираем цвет заливки
ctx.fillStyle = 'orange';

// Заливаем круг
ctx.fill();

Разберем метод arc():

  • 300, 150 — координаты центра круга (x, y)
  • 50 — радиус круга
  • 0 — начальный угол (в радианах)
  • 2 * Math.PI — конечный угол (полный круг)

Добавляем текст

Давайте добавим немного текста на наш холст:


// Устанавливаем шрифт
ctx.font = '30px Arial';

// Выбираем цвет текста
ctx.fillStyle = 'purple';

// Рисуем текст
ctx.fillText('Привет, Canvas!', 150, 250);
  1. Устанавливаем шрифт и его размер.
  2. Выбираем цвет для текста.
  3. Рисуем текст, указывая сам текст и координаты (150, 250), где он должен начинаться.

Простая анимация

Наконец, давайте создадим простую анимацию — движущийся квадрат:


let x = 0;

function animate() {
    // Очищаем холст
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Рисуем квадрат
    ctx.fillStyle = 'blue';
    ctx.fillRect(x, 100, 50, 50);

    // Изменяем позицию
    x += 2;

    // Если квадрат ушел за пределы холста, возвращаем его в начало
    if (x > canvas.width) {
        x = -50;
    }

    // Запрашиваем следующий кадр анимации
    requestAnimationFrame(animate);
}

// Запускаем анимацию
animate();

Этот код:

  1. Создает переменную x для отслеживания позиции квадрата.
  2. Определяет функцию animate(), которая:
  • Очищает холст
  • Рисует синий квадрат
  • Увеличивает x на 2 (движение вправо)
  • Проверяет, не ушел ли квадрат за пределы холста
  • Запрашивает следующий кадр анимации
  • Запускает анимацию вызовом animate().

Заключение

Вот и все! Теперь вы знаете основы рисования на Canvas с помощью JavaScript. Мы научились создавать холст, рисовать фигуры, линии, добавлять текст и даже создали простую анимацию.

Не бойтесь экспериментировать! Попробуйте изменить цвета, размеры, добавить новые фигуры или создать более сложную анимацию. С практикой вы сможете создавать удивительные вещи на Canvas.

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

Понравилась запись? Оцените!
Оценок: 0 Среднее: 0
Telegram
WhatsApp
VK
Facebook
Email

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Рекомендуем