SVG-пути

Если вы хотите разнообразить Lightscript, добавление фона — эффектный способ сделать это. Существует несколько подходов, но самый простой и эффективный — использование SVG-путей.

SVG-пути можно создать относительно легко с помощью Adobe Illustrator. Лучше всего начать с обычного PNG-изображения, которое вы хотите упростить до SVG-пути. Найдя фоновое изображение, создайте новый проект Illustrator, нажав Новый и выбрав пресет Web Large.

Затем импортируйте справочное изображение на новую монтажную область, нажав Файл → Поместить в панели инструментов и выбрав изображение в появившемся окне.

Часто монтажная область будет намного больше импортированного изображения. Чтобы это исправить, нажмите Объект → Монтажные области → Подогнать по границам объекта.

Затем выберите часть изображения, которую хотите изолировать в путь. SVG-изображения состоят из многоугольников, определённых их контурным путём. Эти многоугольники затем можно заполнить цветом или градиентом с помощью JS Canvas API.

В этом примере трассируется контур пруда и он заполняется сплошным цветом. Для начала выберите инструмент «Перо», нажав P на клавиатуре. Нажмите точку вдоль контура фигуры и добавляйте точки до создания непрерывного пути, повторяющего форму и размер выбранной фигуры. Цвет фигуры не важен, так как цвет задаётся отдельно в коде JavaScript.

Довольствуясь путём, экспортируйте его, нажав Файл → Экспортировать → Экспортировать как. Выберите тип файла SVG.

В следующем окне убедитесь, что для параметра Изображение установлено значение Ссылка, затем нажмите Показать код.

В открывшемся окне Блокнота найдите тег <polygon> и скопируйте весь атрибут points. Это должна быть длинная строка чисел. Затем нажмите Отмена — все необходимые данные у вас уже есть.

Чтобы нарисовать изображение на основе пути на canvas эффекта, объявите две новые константы. Сначала объявите константу, содержащую скопированную строку.

Совет

Например, 351 396.5 440 435.5 501.84 станет M351 396.5 440 435.5 501.84.

Теперь создайте новый путь с помощью new Path2D(path), где path — имя первой константы.

Изображение можно отрисовать, вызвав ctx.fill(path2d), где path2d — имя пути, объявленного на предыдущем шаге.

Для задания цвета фигуры вызовите ctx.fillStyle(color) перед отрисовкой. Эта функция принимает шестнадцатеричные коды цвета, CSS-имена цветов, CSS-функции цвета и градиенты.

Также можно использовать полный набор эффектов трансформации canvas, таких как масштабирование и перемещение. Чтобы трансформации применялись только к текущему изображению, используйте ctx.setTransform(1,0,0,1,0,0) после отрисовки каждого слоя.

Следующий пример кода показывает, как нарисовать простое SVG-путь изображение. Эту технику можно повторять столько раз, сколько нужно, для создания сложных фонов.

var c = document.getElementById("exCanvas");
var ctx = c.getContext("2d");

// Data copied from Illustrator. Make sure the first character is M.
const pondData = "M351 396.5 440 435.5 501.84 435.5 539.37 435.5 584.5 415.5 581.5 396.5 570 385.5 581.5 383.13 546 370.5 502 365.5 480.5 384.66 457.42 365.5 443.63 365.5 432.14 365.5 413 380.5 408 390.5 371 387.5 351 396.5";
// Create a new Path2D from the data.
const pondPath = new Path2D(pondData);

function update() {

  ctx.scale(0.3,0.3); // Optional canvas transformation. You can also use ctx.translate(x,y) to move the location of the new path.
  ctx.fillStyle = "blue"; // Set color of path. You can also use gradients here.
  ctx.fill(pondPath); // Draw the path.
  ctx.setTransform(1, 0, 0, 1, 0, 0); // Reset transformation so it only affects this path.

  window.requestAnimationFrame(update);
}

window.requestAnimationFrame(update);

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