HTML - Canvas: руковод Beginner's Guide to Web Graphics

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

Что такое HTML Canvas?

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

Пример

Давайте начнем с простого примера, чтобы окунуться в воду:

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

Этот код создает элемент canvas на вашем веб-странице. Это какsetup подмостков с чистым холстом, готовым для вашего художественного прикосновения!

Контекст отрисовки

Теперь у нас есть холст, и нам нужно как-то рисовать на нем. Вот где появляется контекст отрисовки. Представьте его как ваш набор живописных инструментов. Мы будем использовать JavaScript, чтобы получить этот контекст:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

Здесь мы забираем наш холст и просим 2D набор инструментов для рисования. Это как picking up вашу карандаш и палитру!

Поддержка браузерами

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

if (canvas.getContext) {
// Canvas поддерживается
} else {
// Canvas не поддерживается
}

Этот код как если бы вы спросили: "Эй, браузер, ты можешь справиться с этой классной canvas штукой?" Если он говорит "да", то мы можем продолжить!

HTML Canvas - Рисование прямоугольников

Давайте начнем с чего-то простого – рисования прямоугольников. Canvas имеет три метода для этого:

Метод	Описание
fillRect(x, y, ширина, высота)	Рисует заполненный прямоугольник
strokeRect(x, y, ширина, высота)	Рисует контур прямоугольника
clearRect(x, y, ширина, высота)	Очищает указанную прямоугольную область

Вот пример:

ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

ctx.strokeStyle = "blue";
ctx.strokeRect(70, 10, 50, 50);

ctx.clearRect(30, 30, 30, 30);

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

HTML Canvas - Рисование контуров

Теперь давайте немного пофантазируем с контурами. Контуры как connect-the-dots головоломки. Вот как это делается:

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

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

HTML Canvas - Рисование линий

Рисование линий похоже на контуры, но проще. Вот пример:

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

Этот код рисует диагональную линию от верхнего левого угла до середины правого угла нашего canvas. Это как игра connect the dots с двумя точками!

HTML Canvas - Рисование Безье кривых

Теперь добавим немного изгибов в наш репертуар. Безье кривые как изысканное kursiv рисования мира:

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke();

Это создает кривую, начинающуюся с (20, 20), использующую (20, 100) и (200, 100) как control points, и заканчивающуюся на (200, 20). Это как рисование улыбки!

HTML Canvas - Рисование квадратных кривых

Квадратные кривые как simpler cousin Безье:

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(100, 100, 180, 20);
ctx.stroke();

Это создает кривую от (20, 20) до (180, 20), с (100, 100) как control point. Это идеально для рисования arches!

HTML Canvas - Использование изображений

Canvas не только для рисования – мы также можем работать с изображениями:

var img = new Image();
img.onload = function() {
ctx.drawImage(img, 10, 10);
};
img.src = 'myImage.png';

Этот код загружает изображение и рисует его на нашем canvas. Это как наклеивание наклейки в вашей цифровой открытке!

HTML Canvas - Создание градиентов

Давайте добавим немного color flair с градиентами:

var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "blue");

ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);

Этот код создает градиент от красного до синего и использует его для заливки прямоугольника. Это как создание digital заката!

HTML Canvas - Стили и цвета

Canvas предлагает различные способы стилизации наших рисунков:

ctx.fillStyle = "yellow";
ctx.strokeStyle = "black";
ctx.lineWidth = 5;

ctx.fillRect(25, 25, 100, 100);
ctx.strokeRect(25, 25, 100, 100);

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

HTML Canvas - Текст и шрифты

Мы также можем добавлять текст на наш canvas:

ctx.font = "30px Arial";
ctx.fillText("Hello, Canvas!", 10, 50);

Этот код пишет "Hello, Canvas!" в шрифте 30px Arial. Это как добавление подписей к вашей цифровой работе!

HTML Canvas - Орнаменты и тени

Давайте добавим глубину с помощью рисунков и теней:

var img = new Image();
img.src = 'pattern.png';
img.onload = function() {
var pattern = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 200, 200);
};

ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 100, 100);

Этот код создает узорный фоновый и синий квадрат с тенью. Это как добавление текстуры и глубины к вашей цифровой живописи!

HTML Canvas - Сохранение и восстановление состояний

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

ctx.fillStyle = "blue";
ctx.save();

ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

ctx.restore();
ctx.fillRect(70, 10, 50, 50);

Этот код рисует красный квадрат, затем синий. Это как если бы у вас было несколько слоев в вашей цифровой работе!

HTML Canvas - Трансляция

Мы можем移动 our drawing origin:

ctx.translate(100, 50);
ctx.fillRect(0, 0, 50, 50);

Этот код移动 our drawing point и затем рисует квадрат. Это как если бы вы slid ваш бумажный before starting to draw!

HTML Canvas - Вращение

Давайте добавим немного вращения к нашим рисункам:

ctx.rotate(Math.PI / 4);
ctx.fillRect(50, -25, 100, 50);

Этот код вращает наш canvas и рисует rectangle. Это как поворачивая бумагу под углом перед рисованием!

HTML Canvas - Масштабирование

Мы также можем изменить масштаб наших рисунков:

ctx.scale(2, 2);
ctx.fillRect(25, 25, 50, 50);

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

HTML Canvas - Трансформации

Трансформации позволяют для более сложных манипуляций:

ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillRect(0, 0, 50, 50);

Этот код применяет сложную трансформацию перед рисованием. Это как bending reality в вашем цифровом мире!

HTML Canvas - Композиция

Мы можем контролировать, как новые рисунки взаимодействуют с существующими:

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

ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

Этот код рисует синий квадрат, затем красный квадрат поверх него. Это как нанесение различных цветов краски!

HTML Canvas - Анимации

Наконец, давайте оживим наш canvas с помощью анимации:

var x = 0;

function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x, 0, 50, 50);
x += 2;
if (x > canvas.width) x = 0;
requestAnimationFrame(animate);
}

animate();

Этот код создает квадрат, который движется по экрану. Это как создание вашего собственного little movie!

И вот у вас есть это – бешеная экскурсия по HTML Canvas! Помните, ключ к maîtriser Canvas – это практика. Так что experиментируйте, играйте и, самое главное, получайте удовольствие! Кто знает, вы можете создать следующее цифровое произведение искусства. Счастливого кодирования, будущие Пикассо веба!

Credits: Image by storyset