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

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

Ход работы

В рамках практики мы опишем ход выполнения только одного задания в частях 1 – 3. Остальные задания необходимо выполнить самостоятельно.

С теорией рисования фигур можно ознакомиться в "HTML5. Работа с веб-формами" настоящего курса.

Рисование путей

Рассмотрим задание а).

Обозначим стороны треугольников следующим образом:

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

Рис. 25.5. Требуемое изображение

Каждый треугольник может быть нарисован последовательным вызовом трех методов lineTo.

Шаг 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(); // рисуем незаполненную фигуру
25.1.

Отрисовка первого треугольника закончена:

Результат на шаге 1

Рис. 25.6. Результат на шаге 1
Шаг 2

Создание залитого треугольника отличается от предыдущего шага незначительно, а именно, вызовом метода fill, вместо stroke. Добавим соответствующий код в функцию draw:

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.2.

На этом выполнение текущего задания можно считать законченным:

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

Рис. 25.7. Результат выполнения задания а) части 1
Эмиль Галеев
Эмиль Галеев

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

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

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

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

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

татьяна тютикова
татьяна тютикова
Россия, г.Тамбов
Александр Мухаметов
Александр Мухаметов
Казахстан