Целью данного практического занятия является формирование базовых навыков рисования простых фигур на холсте.
(рис 25.1) Задания к выполнению часть 1
(рис 25.2) Задания к выполнению часть 2
(рис 25.3) Задания к выполнению часть 2
(рис 25.4) Задание к выполнению часть 4
В рамках практики мы опишем ход выполнения только одного задания в частях 1 – 3. Остальные задания необходимо выполнить самостоятельно.
С теорией рисования фигур можно ознакомиться в лекции №18 настоящего курса.
Рассмотрим задание а).
Обозначим стороны треугольников следующим образом:
(рис 25.5) Требуемое изображение
Каждый треугольник может быть нарисован последовательным вызовом трех методов lineTo.
Создадим путь для отрисовки первого треугольника:
function draw(){
var canvas = document.getElementById('lesson6');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20,20); // задаем начальную точку для "пера"
ctx.lineTo(20, 120); // сторона А
ctx.lineTo(120,120); // сторона B
ctx.lineTo(20,20); // сторона С
ctx.stroke(); // рисуем незаполненную фигуру
Отрисовка первого треугольника закончена:
(рис 25.6) Результат на шаге 1
Создание залитого треугольника отличается от предыдущего шага незначительно, а именно, вызовом метода
function draw(){
var canvas = document.getElementById('lesson6');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20,20); // задаем начальную точку для "пера"
ctx.lineTo(20, 120); // сторона А
ctx.lineTo(120,120); // сторона B
ctx.lineTo(20,20); // сторона С
ctx.stroke(); // рисуем незаполненную фигуру
ctx.beginPath();
ctx.moveTo(40,20); // задаем начальную точку для отрисовки второго треугольника
ctx.lineTo(140, 20); // сторона D
ctx.lineTo(140,120); // сторона E
ctx.lineTo(40,20); // сторона F
ctx.fill(); // рисуем залитую цветом фигуру
На этом выполнение текущего задания можно считать законченным:
(рис 25.7) Результат выполнения задания а) части 1
Эксперименты с размещением дуг с различными заполнениями и углами, мы оставим на самостоятельное рассмотрение. Упомянем только, что необязательно вручную задавать координаты для дуг, разумнее будет использовать циклы.
Рассмотрим подробнее задание б). Можно выделить всего четыре
(рис 25.8) Требуемое изображение
Основная сложность этого задания в переносе "пера" в начальные позиции для рисования, поэтому обратите внимание на координаты, указанные в методах moveTo и arc:
function draw(){
var canvas = document.getElementById('lesson6');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(65,65); // начальная позиция для рисование
ctx.arc(60,65,5,0,Math.PI*2,true); // дуга А
ctx.moveTo(95,65); // перенос "пера" в позицию для отрисовки дуги B
ctx.arc(90,65,5,0,Math.PI*2,true); // дуга B
ctx.moveTo(110,75); // перенос "пера" для отрисовки дуги C
ctx.arc(75,75,35,0,Math.PI,false); // дуга C
ctx.moveTo(125,75); // перенос "пера" для отрисовки дуги D
ctx.arc(75,75,50,0,Math.PI*2,true); // дуга D
ctx.stroke(); // отрисовка незаполненной фигуры
Результат вызова метода
(рис 25.9) Результат выполнения задания б) части 2
Оставим задание б) на самостоятельное выполнение. Отметим только, что для отрисовки каждой "половинки сердца" используется три кривые (метод bezierCurveTo).
Рассмотрим задание а). Всего нам понадобится шесть кривых для выполнения задания:
(рис 25.10) Требуемое изображение
Если рисовать кривые последовательно от A к F, то понадобится только один вызов функции moveTo для задания начальных координат для первой кривой (A). Как и в предыдущем примере нужно уделить внимание задаваемым координатам для кривых:
function draw(){
var canvas = document.getElementById('lesson6');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75,25); // задание начальных координат
ctx.quadraticCurveTo(25,25,25,62.5); // кривая А
ctx.quadraticCurveTo(25,100,50,100); // кривая B
ctx.quadraticCurveTo(50,120,30,125); // кривая C
ctx.quadraticCurveTo(60,120,65,100); // кривая D
ctx.quadraticCurveTo(125,100,125,62.5); // кривая E
ctx.quadraticCurveTo(125,25,75,25); // кривая F
ctx.stroke(); // отрисовка незаполненной фигуры
В результате получим следующее изображение:
(рис 25.11) Результат выполнения задания а) части 3
Нами рассмотрены все необходимые функции, оставшиеся задания необходимо выполнить самотоятельно.
Целью данного практического занятия является формирование базовых навыков рисования простых фигур на холсте.
(рис 25.1) Задания к выполнению часть 1
(рис 25.2) Задания к выполнению часть 2
(рис 25.3) Задания к выполнению часть 2
(рис 25.4) Задание к выполнению часть 4
В рамках практики мы опишем ход выполнения только одного задания в частях 1 – 3. Остальные задания необходимо выполнить самостоятельно.
С теорией рисования фигур можно ознакомиться в лекции №18 настоящего курса.
Рассмотрим задание а).
Обозначим стороны треугольников следующим образом:
(рис 25.5) Требуемое изображение
Каждый треугольник может быть нарисован последовательным вызовом трех методов lineTo.
Создадим путь для отрисовки первого треугольника:
function draw(){
var canvas = document.getElementById('lesson6');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20,20); // задаем начальную точку для "пера"
ctx.lineTo(20, 120); // сторона А
ctx.lineTo(120,120); // сторона B
ctx.lineTo(20,20); // сторона С
ctx.stroke(); // рисуем незаполненную фигуру
Отрисовка первого треугольника закончена:
(рис 25.6) Результат на шаге 1
Создание залитого треугольника отличается от предыдущего шага незначительно, а именно, вызовом метода
function draw(){
var canvas = document.getElementById('lesson6');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20,20); // задаем начальную точку для "пера"
ctx.lineTo(20, 120); // сторона А
ctx.lineTo(120,120); // сторона B
ctx.lineTo(20,20); // сторона С
ctx.stroke(); // рисуем незаполненную фигуру
ctx.beginPath();
ctx.moveTo(40,20); // задаем начальную точку для отрисовки второго треугольника
ctx.lineTo(140, 20); // сторона D
ctx.lineTo(140,120); // сторона E
ctx.lineTo(40,20); // сторона F
ctx.fill(); // рисуем залитую цветом фигуру
На этом выполнение текущего задания можно считать законченным:
(рис 25.7) Результат выполнения задания а) части 1
Эксперименты с размещением дуг с различными заполнениями и углами, мы оставим на самостоятельное рассмотрение. Упомянем только, что необязательно вручную задавать координаты для дуг, разумнее будет использовать циклы.
Рассмотрим подробнее задание б). Можно выделить всего четыре
(рис 25.8) Требуемое изображение
Основная сложность этого задания в переносе "пера" в начальные позиции для рисования, поэтому обратите внимание на координаты, указанные в методах moveTo и arc:
function draw(){
var canvas = document.getElementById('lesson6');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(65,65); // начальная позиция для рисование
ctx.arc(60,65,5,0,Math.PI*2,true); // дуга А
ctx.moveTo(95,65); // перенос "пера" в позицию для отрисовки дуги B
ctx.arc(90,65,5,0,Math.PI*2,true); // дуга B
ctx.moveTo(110,75); // перенос "пера" для отрисовки дуги C
ctx.arc(75,75,35,0,Math.PI,false); // дуга C
ctx.moveTo(125,75); // перенос "пера" для отрисовки дуги D
ctx.arc(75,75,50,0,Math.PI*2,true); // дуга D
ctx.stroke(); // отрисовка незаполненной фигуры
Результат вызова метода
(рис 25.9) Результат выполнения задания б) части 2
Оставим задание б) на самостоятельное выполнение. Отметим только, что для отрисовки каждой "половинки сердца" используется три кривые (метод bezierCurveTo).
Рассмотрим задание а). Всего нам понадобится шесть кривых для выполнения задания:
(рис 25.10) Требуемое изображение
Если рисовать кривые последовательно от A к F, то понадобится только один вызов функции moveTo для задания начальных координат для первой кривой (A). Как и в предыдущем примере нужно уделить внимание задаваемым координатам для кривых:
function draw(){
var canvas = document.getElementById('lesson6');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75,25); // задание начальных координат
ctx.quadraticCurveTo(25,25,25,62.5); // кривая А
ctx.quadraticCurveTo(25,100,50,100); // кривая B
ctx.quadraticCurveTo(50,120,30,125); // кривая C
ctx.quadraticCurveTo(60,120,65,100); // кривая D
ctx.quadraticCurveTo(125,100,125,62.5); // кривая E
ctx.quadraticCurveTo(125,25,75,25); // кривая F
ctx.stroke(); // отрисовка незаполненной фигуры
В результате получим следующее изображение:
(рис 25.11) Результат выполнения задания а) части 3
Нами рассмотрены все необходимые функции, оставшиеся задания необходимо выполнить самотоятельно.
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.