В одном из первых уроков я рассказывал про типы данных, такие как Number, String и т.д., но не рассказал про BigInt и Symbol, а просто упомянул их, сказав что в одном из будущих уроков я обязательно про них расскажу. Думаю, уже давно пора это сделать.
Итак, начнем с bigInt. Главное отличие bigInt от Number заключается в том, что типа данных Number имеете ограничение какое максимальное число он может хранить. А это примерно 9 триллионов. Если вы работаете с числами больше этого значения, то вам необходимо использовать тип данных bigInt. Т.е. BigInt может хранить абсолютно любое число в отличие он Number.
Чтобы использовать BigInt, можно добавить “n” к числу, чтобы указать, что это BigInt, или использовать функцию BigInt().
Обычно этот тип данных используется в финансовой сфере или для разработки приложений с криптографией.
На этом с bigInt все, переходим к типу данных Symbol.
Тип данных Symbol в JavaScript был введен в ECMAScript 2015 и представляет собой уникальный и неизменяемый идентификатор. Symbol очень полезен в ситуациях, когда вы хотите создать уникальные ключи для свойств объектов, чтобы избежать конфликтов имен. Это в основном полезно для больших программ, с множеством сторонних библиотек. Давайте чуть попрактикуемся, чтобы лучше понять.
Мы можем внутри скобок указать в виде строки, для чего мы используем этот символ, но это необязательно.
Если мы создадим вторую константу с точно таким же значением, то они не будут равны друг другу, так как внутри них находятся два разных идентификатора.
Теперь создадим какой-нибудь объект.
Далее добавим в этот объект константу emailKey который представляет из себя тип данных символ. Добавить ключ в виде символа к объекту необходимо с помощью квадратных скобок. И зададим значение этому ключу.
И давайте выведем значение этого ключа:
Теперь если другой программист захочет добавить ключ к этому объекту с таким же именем, то мы будем уверены, что этот новый ключ не перезапишет наш.
У объекта-класса Object есть метод keys, который позволяет вернуть массив с именами ключей объекта. Так вот, данный и похожие методы не видят ключи в виде символов.
Двигаемся дальше. И переходим к следующей теме – это работа с тегом Canvas с помощью JavaScript. Canvas – это мощный элемент HTML5, который позволяет разработчикам рисовать графику на веб-страницах с помощью скриптов. Тег<canvas> создает область на странице, в которой можно динамически рисовать графику, создавать анимации и обрабатывать изображения.
Мы сейчас все методы и свойства для работы с canvas изучать не будем, так как их очень много и данная тема достойна отдельного курса. А мы изучим те методы и свойства, которые пригодятся нам для следующей практики.
Итак. Давайте для начала создам html файл с необходимыми тегами. Внутри бади создам тег канвас 500 пикселей в высоту и ширину. А также задам ему рамку, чтобы мы видели границы холста на экране. Да, забыл сказать, что тег канвас создает холст, на котором мы можем рисовать, редактировать изображение и т.д.
Далее с помощью javascript получим доступ к этому тегу канвас .
Сейчас метод гетэлементбайid вернет непосредственно дом объект канвас. Но чтобы рисовать на нём нам надо указать, нам нужен 2d или 3d холст. Если мы не планируем работать с 3d объектами, то нас вполне устроит 2D. Указать, что мы хотим работать именно с 2d нам поможет встроенный метод объекта канвас как getContext. В скобках с помощью текста указываем 2d.
Далее давайте нарисуем прямоугольник на этом холсте. Нарисовать прямоугольник мы можем с помощью метода fillRect (расшифровывается как fill Retangle, т.е. заполнить прямоугольник). В первых дух параметрах указываем позицию, где будет располагаться прямоугольник. Пусть это будут 10px по x и 10px по y. А в последующих двух параметрах мы указываем ширину и высоту прямоугольника. Пусть наш прямоугольник будет 100 пикселей в ширину и 100px в высоту.
Проверяем.
По умолчанию цвет заливки у нас черный, но мы его можем поменять с помощью свойства fillStyle. Давайте укажем синий. Цвет можно указывать в 16-тиричном коде, с помощью функции rba, или с помощью заготовленных слов, таких как red, blue и т.д. Напишем слово blue. Обязательно указываем цвет заливки до рисования прямоугольника, иначе цвет заливки поменяется после того как мы нарисуем черный прямоугольник.
А как добавить картинку на холст. Для этот нам надо сначала создать тег img. Мы можем воспользоваться методом createElement, или с помощью конструктора Image()
Далее укажу путь к картинке с помощью свойства src.
Также у Dom элемента image есть свойство onload , внутри которого мы можем указать функцию, и эта функция запустится тогда, когда браузер загрузит изображение.
А в теле функции мы будем использовать свойство drawImage объекта Canvas, которое и добавит картинку в наш холст. В первом параметре указываем изображение, а дальше укажем расположение по x и y. Проверяем.
Также с помощью метода draeImage мы можем не только отобразить изображение на холсте, но также изменить размеры этого изображения. Для этого, после координат x и y надо ввести ширину и высоту.
И еще мы можем с помощью drawImage также обрезать изображение. Только тогда нам надо указать вот столько параметров.
где sx и sy это координаты откуда начинать обрезку.
sw, sh – это, соответственно, ширина и высота обрезаемой области.
dx и dy – это координаты где будет располагаться ваше изображение на холсте.
dw и dh – это ширина и высота обрезанной картинке которая будет отображаться на холсте.
На этом с теорией всё. Приступаем к практике.
