Веб лабы (canvas)

Задание к лабораторной работе №3:

Задание №1:

• Нарисуйте сетку из окружностей 12*12, цвета их очертаний должны плавно переливаться, оттенки должны быть похожи на палитру графического редактора. Пример с квадратами:
• 
  

Задание №2:

При каждом клике мышью внутри canvas рисуется линия от начальной координаты до местоположения клика, начальной координатой считается (0,0).

• Создайте сами подобный canvas;
• Задайте линии градиентный цвет, прозрачность;
• Измените стиль линии;
• Добавьте кнопку, которая будет очищать canvas.

Задание №3:

Скопируйте получившийся canvas и модифицируйте его:

• Рисование должно срабатывать на каждое движение мыши внутри canvas;
• Теперь модифицируйте задачу таким образом, чтобы рисование происходило при удержании клавиши мыши, при каждом движении мышью.
• Добавьте опцию изменения оттенка градиента линии.

Задание №4:

Вариант №1 (нечетные по списку):

• Создать web-страницу с холстом размерами 400x400 пикселей. При загрузке страницы на холсте должен рисоваться заполненный горизонтальным градиентом цвета квадрат с размером стороны 400 пикселей. Вершину квадрата расположить в точке холста с координатами (0,0). Квадрат заполнить линейным градиентом из пяти цветов (цвет на свое усмотрение), используя метод createLinearGradient(). Направление градиента вдоль линии с координатами концов (0,200) и (400,200). Обеспечить уровни распространения цвета для метода addColorStop(): 0.1, 0.3, 0.5, 0,7 и 0.9. Для рисования заполненного квадрата воспользоваться методом fillRect(), заполнение градиентом определить с помощью свойства fillStyle.

Вариант №2 (четные по списку):

• Создать web-страницу с холстом размерами 400x400 пикселей. При загрузке страницы на холсте должен рисоваться заполненный радиальным градиентом цвета круг с радиусом 200 пикселей и координатами центра (200, 200). Круг заполнить радиальным градиентом из пяти цветов (цвет на свое усмотрение), используя метод createRedialGradient(). При формировании конического шаблона радиального градиента цвета радиус первой окружности задать равным нулю, второй – равным 200. Центры обоих окружностей должны иметь координаты (200, 200). Обеспечить уровни распространения цвета для метода addColorStop(): 0.1, 0.3, 0.5, 0,7 и 0.9. Для рисования заполненного круга воспользоваться методом arc(), заполнение градиентом определить с помощью свойства fillStyle.

Отчет по лабораторной работе должен содержать:

• Скриншоты и описание выполнения лабораторной работы попунктно;
• Полный скриншот получившейся веб-страницы;
• HTML, CSS и JavaScript код с необходимыми объяснениями.

Задание к лабораторной работе №4:

Задание №1:

Создайте галерею изображений, с помощью canvas сделайте:

• Возьмите изображение, обрежьте его, сделайте заготовку, чтоб использовать его как элемент рамки;
• Рамку каждому изображению по его размеру;
• Подпись к изображению под рамкой, стилизуйте ее;
• Добавить подписи тень.

Задание №2:

Придумайте статистику для вашей галереи (например, посещаемости), по этой статистике с помощью canvas сделайте:

• График;
• Круговую диаграмму.

Задание №3:

• Создайте полотно canvas, цвет которого будет изменяться в зависимости от местоположения курсора в пределах элемента.

Задание №4:

• Создать web-страницу с холстом 400x400 пикселей, позиционированным в правом верхнем углу окна браузера и рисунком, позиционированным по умолчанию. Обеспечить фон страницы, фон холста. При первом клике на рисунке его изображение должно появиться на холсте, где верхний левый угол изображения рисунка будет позиционирован в точке с координатами (50,50), а само изображение должно иметь размеры 200x150 пикселей. При последующих кликах на рисунке, его изображение на холсте должно смещаться на 10 пикселей по вертикали и на 20 пикселей по горизонтали, относительно его исходного положения. Воспользоваться методами drawImage() и translate() объекта Canvas.

Отчет по лабораторной работе должен содержать:

• Скриншоты и описание выполнения лабораторной работы попунктно;
• Полный скриншот получившейся веб-страницы;
• HTML, CSS и JavaScript код с необходимыми объяснениями.

Задание к лабораторной работе №5:

Задание №1:

Создайте свой графиеский редактор с помощью технологии canvas, он должен содержать:

• Выбор формы кисти;
• Выбор размера кисти;
• Выбор цвета кисти;
• Выбор прозрачности кисти;
• Возможность рисовать прямоугольники, окружности и другие геометрические фигуры;
• Кнопка для очищения полотна;
• Ластик;
• Возможность добавлять текст на полотно.

Задание №2:

Создайте новый canvas, используя трансформации элементов, нарисуйте снегопад со следующими критериями:

• Снежинки разных геометрических форм и размеров;
• Снежинки разной прозрачности, оттенков;
• Задайте картине фон;
• Обрежьте изображения используя clip().

Отчет по лабораторной работе должен содержать:

• Скриншоты и описание выполнения лабораторной работы попунктно;
• Полный скриншот получившейся веб-страницы;
• HTML, CSS и JavaScript код с необходимыми объяснениями.

Задание к лабораторной работе №6:

Задание №1:

Вариант №1 (нечетные по списку):

• Анимируйте галерею, которую вы сделали в 4-ой лабораторной работе.
• Посмотрите на начало 2-ой лабораторной работы, сделайте подобную анимацию, но с разными фигурами (не менее 3).

Вариант №2 (четные по списку):

• Анимируйте снегопад, который вы сделали в 5-ой лабораторной работе.
• Доделайте модель солнечной системы из этой лабораторной работы.

Задание №2:

• Создать web-страницу с холстом 600x600 пикселей, позиционированным по умолчанию. Средствами технологии Canvas обеспечить, чтобы в месте щелчка левой клавишей мыши в любой точке на полотне рисовался закрашенный квадрат случайного цвета с длиной стороны 20 пикселей. Левый верхний угол квадрата позиционировать в точке щелчка с координатами x и y. Для чтения координат точек холста, где выполнен клик можно воспользоваться свойствами pageX и pageY объекта event. Анимируйте нарисованные квадраты на ваше усмотрение.

Задание №3:

• Используя примеры из этой лабораторной работы, усовершенствуйте данный код и создайте свою игру арканоид.

Отчет по лабораторной работе должен содержать:

• Скриншоты и описание выполнения лабораторной работы попунктно;
• Полный скриншот получившейся веб-страницы;
• HTML, CSS и JavaScript код с необходимыми объяснениями.