Pusheen / Пушин
Этот код создаёт векторный рисунок котика Пушина (Pusheen), работающего за ноутбуком. Работа была срисована с оригинальной картинки (https://ru.pinterest.com/pin/883409283138395655/).
В коде были реализованы три функции:
drawLaptop()- отрисовка ноутбука;drawPusheen()- отрисовка самого котика и его деталей;drawText()- печать текста "Pusheen" на экране.
Для создания верхней крышки и самого экрана использовался метод roundRect(), который позволяет задавать прямые прямоугольные формы с мягкими скруглениями углов, а веб-камера нарисована с помощью окружности через arc(). Интерактивный интерфейс внутри дисплея построен из простых прямоугольников fillRect(), поверх которых наложен полупрозрачный градиент createLinearGradient() для создания эффекта естественного блика на стекле.
Нижняя платформа ноутбука и основание клавиатуры сформированы сложными контурами с помощью сочетания moveTo() и дуг скругления arcTo(), что позволило передать плавные углы корпуса. Разделительные линии клавиш и сетка клавиатуры нарисованы прямыми отрезками с помощью методов moveTo() и lineTo().
Для создания силуэта Пушина использовались сложные кубические кривые bezierCurveTo(), с помощью которых построен мягкий и пухлый контур тела, ушек и основания. Усы по бокам головы нарисованы плавными изгибами quadraticCurveTo().
Узоры на шерсти выполнены разной техникой: полоски на лбу созданы прямоугольниками roundRect() со скруглением только нижних углов, широкие полосы на спине нарисованы толстыми линиями через quadraticCurveTo(), сегменты на хвосте были отрисованы так же с помощью quadraticCurveTo().
Для нанесения надписи использовался метод fillText(), который выводит закрашенный текст в заданных координатах холста. С помощью свойства font установлен крупный шрифт Comic Sans MS размером 100px, а цвет текста задан через fillStyle() в едином темном оттенке, совпадающем с контурами рисунка.
