Easy canvas — простая js библиотека, которая невероятно упрощает работу с canvas html

[Kate]

Ссылка на GitHub

Вступление​

Привет всем. Представим, что вы часто работаете с canvas в html. И многие вещи в канвасе делаются не просто. Например чтобы загрузить картинку вам нужно создать объект new Image(), подождать пока прогрузиться, затем только добавить на холст. Или же чтобы нарисовать треугольник вам нужно подбирать координаты и т.п. Очень много строк кода. По этому, если вы потратите 5 минут на изучение данной библиотеки, вы очень сильно сможете упростить отрисовку вашего холста.

Для чего создана это библиотека​

Эта очень простая, абсолютно бесплатная, но в то же время сильная библиотека, которая создана специально, чтобы облегчить использование canvas в html. Почему стоит использовать ее вы узнаете ниже, я расскажу вам основные преимущества.

Как подключить​

Подключить очень просто, достаточно вписать строчку в ваш html файл

<script src="https://gaidadei.ru/easycanvas/easyc.js"></script>
Или же вы можете скачать файл на сайте

Преимущества​

ОЧЕНЬ ПРОСТО НАРИСОВАТЬ ЧТО-ТО

По сути библиотека состоит из объекта new EasyC(). Который имеет два свойства: .canvas и .objects . Первый это DOM элемент канваса, на котором мы будем рисовать. Второй, это массив элементов, которые мы будем рисовать, затем вызываем функцию .draw() и все автоматически рисуется. Например нарисуем картинку:

new EasyC(document.getElementById("canvas"), [{
type: "image",
x: 250,
y: 100,
src: "2.png"
}]).draw();
И сразу получаете готовое изображение на вашем канвасе.

И даже не нужно создавать объект new Image(), все это библиотека делает сама.

ЛЕГКО ЗАГРУЖАТЬ СТОРОННИЕ ФАЙЛЫ

Как это уже было показано на примере выше с изображением, но также еще очень просто загружать и шрифты, например создадим текст с собственным шрифтом

new EasyC(document.getElementById("canvas"), [{
type: "text",
x: 250,
y: 150,
value: "Hello, world\nSecond stroke\nThird stroke",
font: "url(myownfont.ttf)",
size: 26,
align: "left",
fill: "#999",
}]).draw();
Вот что имеем

Как вы видите, вы можете даже писать несколько строк разделяя их знаком \n . Еще также покажу на примере как вы можете заполнять фигуры любой картинкой. Тут я не буду писать полностью код, укажу только свойство которое присвоено всем объектам на этом примере.

fill: "url(2.png, 0, 1, repeat)"
Первое это ссылка на файл, второе координаты изображение, третье это размеры изображение и четвёртое это указываем будет ли изображение повторяться. Получаем такие фигуры

ВЫ МОЖЕТЕ УКАЗЫВАТЬ Z КООРДИНАТУ

Просто указав z координату вы можете выбирать какой объект будет рисоваться поверх другого. Например

new Easyc(document.getElementById("canvas"), [{
type: "triangle",
x: 300,
y: 105,
angleLeft: 1.5*Math.PI/4,
angleRight: 1*Math.PI/4,
base: 150,
fill: "#000",
z: 12
}, {
type: "rectangle",
x: 200,
y: 150,
width: 100,
height: 100,
fill: "#999",
z: 3
}]).draw();
Получаем

ВЫ МОЖЕТЕ РАБОТАТЬ С ОТНОСИТЕЛЬНЫМИ КООРДИНАТАМИ

До этого мы все указывали в абсолютных координатах в пикселях, но также вы можете работать с относительными, относительно ширины и высоты канваса. Достаточно установить relative: true

new EasyC(document.getElementById("canvas"), [{
type: "rectangle",
relative: true,
x: 0.5,
y: 0.25,
width: 0.3,
height: 0.3,
fill: "#999"
}]).draw();
Получаем

Заключение​

Это конечно еще не все свойства, например я не рассказал как создаётся градиент, как делается поворот объектов, прозрачность, масштабирование и т.д. Но основная задача была рассказать о главных преимуществах данной библиотеки. Она очень проста и сильно упрощает вам жизнь. Буду рад, если вам действительно это поможет. Вот, кстати, есть видеоурок, как создаётся мини игра на этой библиотеке.

Источник статьи: https://habr.com/ru/post/569058/