Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 18569 / 1816 | Оценка: 3.91 / 4.09 | Длительность: 12:36:00
Практическая работа 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

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

Эмиль Галеев
Эмиль Галеев

По каким то причинам не сохраняется текст. И не выдает сообщение об ошибке если текста нет. Проверил все внимательно проблем в написании нет. Вопрос почему он не сохраняет?

Алексей Вычегжанин
Алексей Вычегжанин

http://www.intuit.ru/studies/courses/3734/976/lecture/27486?page=3

Заполнил html, js и css-файлы согласно рекомендациям. После запуска главной страницы в панели разработчика браузера, во вкл. Console, выдает сообщение об ошибке:

"script.js:85 Uncaught TypeError: Cannot read property 'addEventListener' of null"

, ссылаясь на строку js-файла (функция load()):

" audio.addEventListener('ended', function () "

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

Функция добавления записей в плейлист не работает. Соответственно сам плей-лист и полоса прокрутки не открываются.

Максим Д
Максим Д
Украина, Кривой рог, Криворожский национальный университет (КНУ), 2016
Сергей Мельников
Сергей Мельников
Казахстан, г. Байконур