Опубликован: 01.08.2012 | Уровень: для всех | Доступ: платный | ВУЗ: Томский политехнический университет
Практическая работа 7:

Рисование фигур

Рисование дуг

Эксперименты с размещением дуг с различными заполнениями и углами, мы оставим на самостоятельное рассмотрение. Упомянем только, что необязательно вручную задавать координаты для дуг, разумнее будет использовать циклы.

Рассмотрим подробнее задание б). Можно выделить всего четыре дуги, которые необходимо нарисовать:

Требуемое изображение

Рис. 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.3.

Результат вызова метода draw:

Результат выполнения задания б) части 2

Рис. 25.9. Результат выполнения задания б) части 2

Кривые Безьe

Оставим задание б) на самостоятельное выполнение. Отметим только, что для отрисовки каждой "половинки сердца" используется три кривые (метод 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.4.

В результате получим следующее изображение:

Результат выполнения задания а) части 3

Рис. 25.11. Результат выполнения задания а) части 3

Нами рассмотрены все необходимые функции, оставшиеся задания необходимо выполнить самотоятельно.

Галина Башкирова
Галина Башкирова

Здравствуйте, недавно закончила курс по проф веб программиованию, мне прислали методические указания с примерами тем, однако темы там для специальности 

Системный администратор информационно-коммуникационных» систем.
Мне нужно самой найти тему? или делать по высланным темам

 

Константин Моренко
Константин Моренко
Георгий Агаджанян
Георгий Агаджанян
Северо-Кавказская академия государственной службы, 2010