Создайте портера Happy Halloween с помощью HTML и CSS
В этой статье мы создадим плакат «Счастливого Хэллоуина» с использованием холста HTML, а также разберемся с некоторыми основными функциями, предоставляемыми холстом в Javascript. Холст — это цифровая техника для рисования графики с помощью JavaScript, а элементы холста можно использовать в качестве контейнера для графики. Используя это, мы можем нарисовать линию , дугу , прямоугольник или цвет заливки в любой замкнутой фигуре, а также написать текст. По умолчанию холст не имеет границ и содержимого. Ниже определены функции, которые можно использовать для рисования холста:
- lineTo(x, y): эта функция используется для рисования линии от текущего местоположения указателя холста до указанной точки с координатами x и y .
- arc(x, y, a1, a2, direction): мы можем использовать эту функцию для рисования дуг, которые могут быть полукругом, полным кругом или любой частью круга в зависимости от начального угла и конечного угла, заданного a1 и a2 в радианы. Кроме того, мы можем указать координаты центра круга, которые равны x и y.
- moveTo(x, y): Могут быть случаи, когда нам нужно переместить перо из текущей точки в какую-то другую точку, но без рисования какой-либо линии или чего-либо еще, поэтому эту функцию можно использовать, чтобы просто переместить перо в точку, координаты которой будут х и у.
- strokeText («текст», x, y): эта функция может использоваться для вставки текста внутри холста в указанной точке с координатами x и y.
- stroke(), fill(): Все вышеперечисленные функции бесполезны, если мы не используем эти функции для управления холстом, когда что-то рисовать/штриховать и когда заливать цветом фигуру.
- beginPath(), closePath(): эти функции необходимо использовать, чтобы сообщить холсту, когда начинать/заканчивать путь.
Свойства холста:
- strokeStyle: определяет цвет линии.
- fillStyle: определяет цвет, используемый для заливки фигур.
- lineJoin: определяет, как линии будут располагаться на стыках.
- lineCap: определяет, как должны выглядеть концы строки.
- шрифт: определяет стиль шрифта и размер текста.
Мы будем использовать вышеуказанные функции и свойства в дизайне Хэллоуина.
Пример: В этом примере описывается использование холста в HTM и Javascript.
Выход:
