Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 18880 / 1857 | Оценка: 3.91 / 4.09 | Длительность: 12:36:00
Лекция 19:

HTML5. Работа с Canvas

Рисование дуг и кривых

Для рисования дуг используется метод arc:

arc(x, y, r, sА, eА, a)

Методу передаются

  • x и y - центр окружности;
  • r - радиус окружности;
  • sA - начальный угол;
  • eA - конечный угол;
  • а - направление.

Рассмотрим на следующем примере:

function createImage() 
  {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.arc(100, 100, 75, 1.2*Math.PI, 1.8 * Math.PI, false);
  ctx.lineWidth = 5;
  ctx.strokeStyle = "black";
  ctx.stroke();

   }

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

 Пример отрисовки дуги

Рис. 23.6. Пример отрисовки дуги

Частным случаем дуги является окружность, изменив одну строку предыдущего примера, а именно значения начального и конечного угла для метода arc (на ноль и 2*\pi соответственно), получим следующий результат:

 Пример отрисовки окружности

Рис. 23.7. Пример отрисовки окружности

Рисование кривых Безье

Для построения квадратичной и кубической кривых используются соответственно функции:

  • quadraticCurveTo (Px, Py, x, y)
  • bezierCurveTo (P1x, P1y, P2x, P2y, x, y)

x и y это точки в которые необходимо перейти, а координаты P(Px, Py) в квадратичной кривой это дополнительные точки которые используются для построения кривой. В кубической кривой соответственно две дополнительные точки.

Следующий пример продемонстрирует отрисовку обеих кривых:

function createImage() 
  {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(10, 15);
  ctx.bezierCurveTo(75, 55, 175, 20, 250, 15);
  ctx.moveTo(10, 15);
  ctx.quadraticCurveTo(100, 100, 250, 15);
  ctx.stroke();
   }

Результат можно увидеть в браузере:

 Пример отрисовки кривых Безье

Рис. 23.8. Пример отрисовки кривых Безье
Эмиль Галеев
Эмиль Галеев

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

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

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 () "

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

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

Александр Чепурко
Александр Чепурко
Украина, Днепродзержинск, 5, 1998
Александр Неруш
Александр Неруш
Россия, г. Саратов