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

HTML5. Работа с Canvas

Работа с цветом и толщиной линий

Работать с цветом и толщиной линий можно при помощи свойств объекта CanvasRenderingContext2D.

Свойство strokeStyle задает цвет линий контура. Все фигуры, которые мы впоследствии нарисуем, будут иметь контур указанного цвета. Цвет задают в виде строки либо с именем цвета, либо в #RRGGBB и rgb(a) форматах.

Рассмотрим последние два формата:

rgb(r,g,b)

где

  • r – красная составляющая;
  • g – зеленая составляющая;
  • b – синяя соствляющая.

Все три составляющие цвета имеют вид десятичных чисел от 0 до 255.

rgba формат позволяет дополнительно задать уровень прозрачности рисуемых линий:

rgba(r,g,b,a)

a – уровень прозрачности (число от 0.0 - полностью прозрачный до 1.0 -полностью непрозрачный).

Следующие четыре выражения задают непрозрачный красный цвет линий контура:

  • ctx.strokeStyle = "red";
  • ctx.strokeStyle = "#FF0000";
  • ctx.strokeStyle = "rgb(255, 0, 0)";
  • ctx.strokeStyle = "rgba(255, 0, 0, 1)";

Цветом по умолчанию является черный.

Свойство fillStyle определяет цвет заливки, также в строковом виде и с использованием тех же форматов, что описаны ранее. Для цвета заливок действуют те же правила, что и для цвета линий. По умолчанию цвет заливок также черный.

Добавим описанные свойства работы с цветом в наш пример:

function createImage() 
  {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.strokeStyle = "red";
  ctx.strokeRect(20,20,50,50);
  ctx.fillStyle = "blue";
  ctx.fillRect(80, 80, 50, 50);
  ctx.clearRect(50,50,50,50);
   }

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

 Пример работы с цветами холста

Рис. 23.4. Пример работы с цветами холста
Нельзя присваивать значение свойства strokeStyle свойству fillStyle и наоборот. Это вызовет ошибку в Web-сценарии.

Более детально работа с цветами и прозрачностью рассмотрена в рамках практического занятия №9.

Свойство lineWidth задает толщину линий в пикселях в виде числа, например:

ctx.lineWidth = 20; 

Работа с положением пера

Говорят, что только дети рисуют, не отрывая руки от бумаги. Нам же могут понадобиться изображения немного посложнее. Для рисования сложного контура используется концепция пера — воображаемого инструмента рисования. Перо можно перемещать в любую точку на канве. Рисование каждой линии контура начинается в точке, где в данный момент находится перо.

Изначально, сразу после загрузки Web-страницы и вывода канвы, перо находится в точке с координатами [0,0], т. е. в верхнем левом углу канвы. Переместить перо в другую точку канвы, можно методом moveTo.

Метод moveTo принимает два параметра moveTo(x,y), соответственно определяющих координаты положения пера по горизонтали и вертикали.

Выражение ctxCanvas.moveTo(10, 30) переместит перо в точку с координатами [10,30].

Рисование прямых линий

Для отрисовки прямых линий используется метод lineTo(x,y), рисующий прямую линию от координат положения пера до указанных в качестве параметров значений x и y.

После рисования прямой линии перо будет установлено в ее конечной точке. Мы можем прямо из этой точки начать рисование следующей линии контура.

Для указания начала отрисовки контура сложной фигуры используется метод beginPath, соответственно при окончании отрисовки фигуры – stroke.

Рассмотрим на следующем примере, по отрисовке пятиугольника:

function createImage() 
  {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(0,100); 
  ctx.lineTo(100,0); 
  ctx.lineTo(200,100); 
  ctx.lineTo(150,200); 
  ctx.lineTo(50,200); 
  ctx.lineTo(0,100); 
  ctx.stroke(); 
   }

Получим следующий результат:

 Пример отрисовки контура сложной фигуры

Рис. 23.5. Пример отрисовки контура сложной фигуры

Последнюю сторону пятиугольника можно было не отрисовывать методом lineTo, а вызвать метод closePath, который автоматически соединит текущее положение пера с начальным

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

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

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

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

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

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

Ульяна Никифорова
Ульяна Никифорова
Россия, г. Глазов
Анастасия Маслова
Анастасия Маслова
Казахстан, Колодезная 40