JavaScript - Canvas: руковод BEGINNER'S GUIDE TO DIGITAL DRAWING

Здравствуйте, начинающий программист! Я рад стать вашим проводником в этом захватывающем путешествии в мир JavaScript и Canvas. Как кто-то, кто преподаёт информатику уже более десяти лет, я могу告诉你, что Canvas является одной из самых有趣 и благодарных тем для изучения. Это как иметь цифровой游乐очный двор прямо в вашем веб-браузере!

Что такое Canvas?

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

Canvas был представлен с HTML5 и с тех пор стал мощным инструментом для создания графики, анимации и даже игр напрямую в веб-браузерах. Это как иметь迷你 студию искусства прямо в вашем редакторе кода!

Работа с Canvas с помощью JavaScript

Теперь, давайте натянем рукава и начнём рисовать! Сначала нам нужно настроить наш Canvas в HTML.

<canvas id="myCanvas" width="400" height="200"></canvas>

Это создаёт элемент canvas шириной 400 пикселей и высотой 200 пикселей. Представьте это как вашу цифровую доску для рисования.

Начало работы с Canvas

Чтобы начать рисовать на нашем canvas, нам нужно получить ссылку на него в нашем коде JavaScript и получить его контекст рисования.

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

Метод getContext('2d') даёт нам 2D контекст отрисовки - инструмент, который мы будем использовать для рисования на нашем canvas.

Рисование фигур

Давайте начнём с чего-то простого - рисования прямоугольника!

ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 75);

Этот код рисует синий прямоугольник,starting с координат (50, 50) и шириной 100 пикселей и высотой 75 пикселей. Это как сказать вашему цифровому перу: "Эй, нарисуй здесь синий прямоугольник и сделай его这么大!"

Рисование линий

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

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 100);
ctx.stroke();

Этот код начинает новый путь, передвигает "пера" в точку (50, 50), затем рисует линию до точки (200, 100) и, наконец, штрихует путь, чтобы сделать его видимым. Это как играть в "соединить точки", но с кодом!

Рисование кругов

Как насчёт того, чтобы нарисовать笑脸? Сначала нарисуем круг для лица:

ctx.beginPath();
ctx.arc(200, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = 'yellow';
ctx.fill();
ctx.stroke();

Этот код рисует жёлтый круг с чёрной рамкой. Метод arc может показаться немного пугающим, но подумайте о нём как о том, чтобы сказать вашему перу: "Нарисуй круг, centered в точке (200, 100), с радиусом 50, starting с 0 и доходя до конца (это что означает Math.PI * 2)."

Добавление текста

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

ctx.font = '20px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello, Canvas!', 10, 30);

Этот код устанавливает шрифт на 20-пиксельный Arial, устанавливает цвет на чёрный и пишет "Hello, Canvas!" starting с позиции (10, 30).

Примеры

Теперь, когда мы рассмотрели основы, давайте посмотрим на несколько забавных примеров, чтобы увидеть, на что действительно способен Canvas!

Пример 1: Рисование дома

// Настройка canvas
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Рисование тела дома
ctx.fillStyle = 'brown';
ctx.fillRect(100, 100, 150, 100);

// Рисование крыши
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(175, 50);
ctx.lineTo(250, 100);
ctx.fillStyle = 'red';
ctx.fill();

// Рисование двери
ctx.fillStyle = 'blue';
ctx.fillRect(150, 150, 50, 50);

// Рисование окна
ctx.fillStyle = 'yellow';
ctx.fillRect(200, 120, 30, 30);

Этот код рисует простой дом с коричневым телом, красной крышей, синей дверью и жёлтым окном. Это как строить дом из кода блоков вместо Lego!

Пример 2: Анимированный круг

Давайте сделаем что-то двигающееся! Вот простой пример анимации прыгающего круга:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

let x = 50;
let y = 50;
let dx = 2;
let dy = 2;
const radius = 20;

function drawCircle() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = 'green';
ctx.fill();

if (x + radius > canvas.width || x - radius < 0) {
dx = -dx;
}
if (y + radius > canvas.height || y - radius < 0) {
dy = -dy;
}

x += dx;
y += dy;

requestAnimationFrame(drawCircle);
}

drawCircle();

Этот код создаёт зелёный круг, который прыгает по canvas. Это как создать свою own маленькую игру Pong!

Таблица методов Canvas

Вот удобная таблица некоторых часто используемых методов Canvas, которые мы рассмотрели и несколько других:

Метод	Описание
fillRect(x, y, width, height)	Рисует заштрихованный прямоугольник
strokeRect(x, y, width, height)	Рисует контур прямоугольника
clearRect(x, y, width, height)	Очищает указанную прямоугольную область
beginPath()	Begins a new path
moveTo(x, y)	Перемещает путь в указанную точку
lineTo(x, y)	Рисует линию до указанной точки
arc(x, y, radius, startAngle, endAngle)	Рисует дугу или круг
fill()	Заштриховывает текущий путь
stroke()	Штрихует текущий путь
fillText(text, x, y)	Рисует заштрихованный текст на canvas
strokeText(text, x, y)	Рисует контур текста

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

Credits: Image by storyset