WebGL - HTML5 Canvas Overview

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

WebGL - Html5 Canvas Overview

HTML5 Canvas

Что такое HTML5 Canvas?

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

Создание вашего первого Canvas

Давайте начнем с создания простого HTML5 Canvas:

<!DOCTYPE html>
<html>
<head>
<title>Мой первый Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
</body>
</html>

В этом примере мы создали элемент canvas с идентификатором "myCanvas", шириной 400 пикселей и высотой 200 пикселей. Это как если бы мы установили мольберт с пустым холстом – теперь мы готовы рисовать!

Рисование на Canvas

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

<!DOCTYPE html>
<html>
<head>
<title>Рисование на Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 50);
</script>
</body>
</html>

Давайте разберем это:

Мы получаем ссылку на наш элемент canvas с помощью getElementById.
Мы получаем 2D контекст рендеринга холста с помощью getContext('2d').
Мы устанавливаем цвет заливки в синий с помощью fillStyle.
Наконец, мы рисуем синий прямоугольник с помощью fillRect(x, y, width, height).

Когда вы откроете это в вашем браузере, вы увидите синий прямоугольник, появившийся на вашем холсте. Поздравляю! Вы только что создали свою первую цифровую картину!

Контекст рендеринга

Что такое контекст рендеринга?

Представьте контекст рендеринга как ваш набор рисовальных инструментов. Он предоставляет методы и свойства, которые позволяют вам рисовать на холсте. В предыдущем примере мы использовали 2D контекст рендеринга, но есть и другие типы.

2D контекст рендеринга

2D контекст рендеринга является наиболее часто используемым и предоставляет широкий спектр функций 2D рисования. Вот таблица некоторых полезных методов 2D контекста:

Метод	Описание
fillRect(x, y, width, height)	Рисует заливной прямоугольник
strokeRect(x, y, width, height)	Рисует контур прямоугольника
fillText(text, x, y)	Рисует заливной текст на холсте
strokeText(text, x, y)	Рисует контур текста на холсте
beginPath()	Начинает новый путь
moveTo(x, y)	Перемещает путь в указанную точку
lineTo(x, y)	Рисует линию до указанной точки
arc(x, y, radius, startAngle, endAngle)	Рисует дугу или круг

Давайте используем некоторые из этих методов, чтобы создать более сложное рисование:

<!DOCTYPE html>
<html>
<head>
<title>Сложное рисование</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// Рисуем дом
ctx.fillStyle = 'brown';
ctx.fillRect(100, 100, 150, 100);

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

// Рисуем дверь
ctx.fillStyle = 'yellow';
ctx.fillRect(160, 150, 30, 50);

// Рисуем текст
ctx.fillStyle = 'black';
ctx.font = '20px Arial';
ctx.fillText('Мой дом', 140, 190);
</script>
</body>
</html>

В этом примере мы нарисовали простой дом с помощью различных методов 2D контекста. Мы использовали fillRect для тела дома и двери, beginPath, moveTo и lineTo для крыши, и fillText чтобы добавить метку. Поиграйте с координатами и цветами, чтобы создать свой уникальный дом!

Контекст WebGL

Введение в WebGL

Теперь давайте перейдем в захватывающий мир 3D графики с WebGL. WebGL (Web Graphics Library) – это API на JavaScript для рендеринга интерактивной 3D и 2D графики в любом совместимом веб-браузере без использования плагинов.

Получение контекста WebGL

Чтобы использовать WebGL, нам нужно получить контекст рендеринга WebGL вместо 2D контекста. Вот как это делается:

<!DOCTYPE html>
<html>
<head>
<title>Контекст WebGL</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl');

if (!gl) {
console.log('WebGL не поддерживается, переходим на experimental-webgl');
gl = canvas.getContext('experimental-webgl');
}

if (!gl) {
alert('Ваш браузер не поддерживает WebGL');
}
</script>
</body>
</html>

В этом примере мы пытаемся получить контекст WebGL. Если он не поддерживается, мы переходим на контекст experimental-webgl. Если и это не доступно, мы информируем пользователя, что их браузер не поддерживает WebGL.

Простой пример WebGL

Давайте создадим простой пример WebGL, который очищает холст с помощью цвета:

<!DOCTYPE html>
<html>
<head>
<title>Простой WebGL</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl');

if (!gl) {
console.log('WebGL не поддерживается, переходим на experimental-webgl');
gl = canvas.getContext('experimental-webgl');
}

if (!gl) {
alert('Ваш браузер не поддерживает WebGL');
} else {
// Устанавливаем цвет очищения в красный, полностью непрозрачный
gl.clearColor(1.0, 0.0, 0.0, 1.0);
// Очищаем буфер цвета с指定的 цветом очищения
gl.clear(gl.COLOR_BUFFER_BIT);
}
</script>
</body>
</html>

В этом примере мы устанавливаем цвет очищения в красный с помощью gl.clearColor(red, green, blue, alpha), где каждое значение варьируется от 0.0 до 1.0. Затем мы очищаем буфер цвета этим цветом с помощью gl.clear(gl.COLOR_BUFFER_BIT). Когда вы запустите это, вы должны увидеть красный холст.

Помните, что WebGL гораздо сложнее, чем рендеринг 2D canvas, и включает concepts, такие как шейдеры, буферы и матрицы. Но не волнуйтесь! Мы рассмотрим их в будущих уроках.

Заключение

Поздравляю! Вы сделали свои первые шаги в мир HTML5 Canvas и WebGL. Мы рассмотрели основы создания canvas, рисования в 2D и даже немного окунулись в 3D мир WebGL.

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

В следующем уроке мы углубимся в более сложные техники 2D canvas и начнем исследовать fascininating мир шейдеров WebGL. До свидания, продолжайте программировать и счастливого рисования!

Credits: Image by storyset