Краткий обзор HTML Canvas

HTML Canvas — это удивительная технология для рисования, встроенная во все современные браузеры. С помощью Canvas вы можете рисовать фигуры, управлять фотографиями, создавать игры и анимировать фактически что угодно — всё это с правильными веб-стандартами.

Создание области и переменных

Прежде чем создавать стили, нужно создать саму canvas область. Для этого создадим в html,

<canvas id='canvas'></canvas>

а в js прописываем переменную,

const 
canvas = document.getElementById('canvas'), // создаем указатель на холст
elem = canvas.getContext('2d'); // создаем указатель на контекст рисования

Готово!

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

Теперь нам понадобятся некоторые свойства для очищения области canvas

Очищение области
canvas.width = canvas.width;	//
elem.clearRect(0, 0, canvas.width, canvas.height);	// способ не идеален, так как наследует ранее заданные параметры
canvas.width = значение;	// если canvas.width = 310, то значение = 310

Основные параметры

основные параметры
elem.width = x;	// ширина
elem.height = y;	// высота
elem.moveTo(x, y);	// начало линии
elem.lineTo(x, y);	// конец линии
elem.strokeStyle = ‘color’;	// цвет линии
elem.lineWidth = n;	// ширина линии
elem.lineCap = ’round || square’;	// скругление концов
elem.stroke();	// объявляем линию (пусто, всегда после параметров)
elem.fillStyle = ‘color’;	// заливка фигуры
elem.fill();	// объявляем заливку
elem.beginPath();	// начало контура || объявляем, что это новый контур
elem.closePath();	// конец (замыкание) контура

Создание дуг и окружности

Рисуем дугу
elem.arc(x, y, r, 0, Math.PI)	// x, y — координаты центра
	// r — радиус
	// 0, (200 || Math.PI) — начальная и конечная точка
	// 2 * Math.PI — применяется для создания окружности

Дуга при помощи квадратикКурвТу
elem.moveTo(x, y);	// начальная точка
elem.quadraticCurveTo(x1, y1, x2, y2);

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

Прямоугольники
elem.strokeRect(x, y, w, h);	// начальные точки, ширина и высота
elem.fillRect(x, y, w, h);	// заливка фигуры
elem.clearRect(x, y, w, h);	// очищение области

Кривая Безье

Кривая Безье
elem.moveTo(x, y);	// начальная точка
elem.bezierCurveTo(dx1, dy1, dx2, dy2, x2, y2);	// dx1, dy1, dx2, dy2 — точки соприкосновения
	// x2, y2 — конечные точки

Работа с изображениями

Для начала необходимо создать переменную для изображения. Для этого есть три способа:

Создание переменных
let img = document.createElement(‘img’);	// #1
let img = new image();	// #2

Затем выводим созданную переменную и добавляем саму картинку

img.src = 'ссылка на изображение';

let img = document.getElementById(‘img’);

// #3, создаем изображение в html и присваиваем id=’img’

Работа с изображениями
elem.drawImage(img, x, y);	x, y — верхний левый угол
elem.drawImage(img, x, y, w, h);	w, h — параметры ширина и высота, создают размер изображения/деформация, как background-size
elem.drawImage(img, sx, sy, sw, sh, x, y, w, h);	// 8 значений
	sx, sy, sw, sh — вырезает область исходного изображения
	x, y, w, h — параметры для вставки изображения

Работа с текстом

Работа с текстом
elem.fillText(‘любой текст’, x, y);
elem.strokeText(‘любой текст’, x, y);
elem.font = ‘bold 64px Arial’;	// по аналогии с font в css
elem.baseline = »;	// top, middle, alphabetic, ideographic, hanging
elem.textAlign = »;	// center, start, end, letf, right
Сюда же применимы
elem.fillStyle = ‘color’;
elem.strokeStyle = ‘color’;
elem.lineWidth = ‘n’;

Работа с изображениями, наложение текста

Сначала создаем переменную для изображения (см. работа с изображениями), затем добавляем скрипт и редактируем по необходимости

function drawText() {
  elem.font = 'bold 64px Arial';
  elem.fillStyle = elem.createPattern(img, 'repeat');
  elem.textAlign = 'center';

  const x = canvas.width / 2;
  elem.fillText('любой текст', x, 200);
}
drawText();

Создание градиента Создаем новую переменную,

const grad = elem.createLinearGradient(x1, y1, x2, y2);

где, x1, y1, x2, y2 — направление градиента

createLinearGradient
elem.addColorStop(0,’color’);	// color #1
elem.addColorStop(0.5,’color’);	// color #2
elem.addColorStop(1,’color’);	// color #3
// 0, 0.1, 0.2 … 1	// etc.
elem.fillStyle = grad;
elem.fillRect(x1, y1, x2, y2);

createRadialGradient
elem.createRadialGradient(x0,y0,r0,x1,y1,r1);	x0 координата x стартового круга градиента y0 координата y стартового круга градиента r0 радиус начального круга
	x1 координата x конечной окружности градиента y1 координата y конечной окружности градиента r1 радиус конечного круга

На этом пока все. Статья будет дополняться в ходе изучения материала. Более подробная информация доступна на сайте w3schools.