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

Canvas. Цвет

Аннотация: В рамках данного занятия мы подробнее рассмотрим вопросы работы с цветами в рамках canvas (холста).

Текущее занятие будет отличаться от предыдущих отсутствием заданий для выполнения. Целью занятия является демонстрация способов работы с цветом fillStyle и strokeStyle.

По аналогии с методами fill и stroke, fillStyle задает цвет заливки фигуры, а strokeStyle – цвет обводки фигуры.

Допустимыми значениями методов задания цветов могут быть строки - значения цветов CSS3.

К примеру, могут быть использованы непосредственно названия цветов. Рассмотрим на примере – создадим массив строк, обозначающих цвета в CSS для отрисовки цветов радуги:

function createImage() 
    {
    var ctx = document.getElementById('lesson9').getContext('2d');
    var colors = ["red","orange","yellow","green","lightblue","blue","violet"];
    for (i=0; i<7; i++)
    {
      ctx.fillStyle=colors[i];
      ctx.fillRect(20*i,20,20,200);
    }
    }
27.1.

С результатом можно ознакомиться, открыв HTML - страницу в проводнике.

Пример отображения цветов а) - при использовании fillStyle и fillRect б) - при использовании strokeStyle и strokeRect

Рис. 27.1. Пример отображения цветов а) - при использовании fillStyle и fillRect б) - при использовании strokeStyle и strokeRect

Можно для задания цветов использовать HEX - строки, приведенный результат на рис. 27.1 . не изменится, в случае определения массива цветов следующим образом:

var colors = ["#FF0000","#FFA500","#FFFF00","#008000","#ADD8E6","#0000FF","#EE82EE"];
27.2.

Помимо указанных способов определения цветов могут быть указаны их rgb - обозначения, посредством задания строки вида rgd(r,g,b):

var colors = ["rgb(255,0,0)", "rgb(255,165,0)", "rgb(255,255,0)",
 "rgb(0,255,0)", "rgb(173,216,230)","rgb(0,0,255)","rgb(238,130,238)"];
27.3.

Прозрачность

На холсте можно выводить полупрозрачные фигуры. Значение прозрачности определяется так называемым значением globalAppha и находится в пределах [0,0 ; 1,0]. При этом 1.0 – непрозрачное значение, заданное по - умолчанию.

Для установки прозрачности цвета в методах fillStyle и strokeStyle используются строки вида "rgba(r,g,b,a)", где параметр a задает значение прозрачности цвета. Иными словами, следующий код rgba(255,0,0,0.5) задаст красный цвет средней прозрачности.

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

Для хранения rgb кодов цветов будем использовать хэш (см. "JavaScript. Работа с функциями и массивами" ):

function createImage()
{
  var ctx = document.getElementById('lesson9').getContext('2d');
  var clr = ["red","orange","yellow","green","lightblue","blue","violet"]; 
  /* этот массив понадобится нам для корректности ссылок на элементы хэша */
  var colors = {}; /* объявляем хэш, в котором будем хранить rgb значение цветов*/
  colors["red"] = [255,0,0]; /* rgb код красного цвета и т.д.*/
  colors["orange"] = [255,165,0];
  colors["yellow"] = [255,255,0];
  colors["green"] = [0,255,0];
  colors["lightblue"] = [173,216,230];
  colors["blue"] = [0,0,255];
  colors["violet"] = [238,130,238];
  var x=0; 
  /*вспомогательная переменная, для задания координаты по - 
горизонтали очередного залитого цветом прямоугольника*/
  for (i=0; i<7; i++) 
  /* цикл для обращения к элементам хэша, хранящим массив rgb кода */
  {
    for(j=1; j<5; j++)
    {
     ctx.fillStyle="rgba("+colors[clr[i]][0]+","+colors[clr[i]][1]+",
       "+colors[clr[i]][2]+
       ","+(j*0.2)+")";
     /*задание параемтров цвета заливки*/
     ctx.fillRect(x,20,20,100); /*отрисовка прямоугольника*/
     x=x+20; 
     // приращение переменной координаты по - горизонтали, для того, 
      чтобы следующий прямоугольник нe накладывался на предыдущий */
    }
  }
}
27.4.

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

Пример задания прозрачности для цветов

Рис. 27.2. Пример задания прозрачности для цветов

На этом мы заканчиваем рассмотрение базовых принципов работы с цветами в рамках холста. Для более детального изучения рекомендуется изучить материалы, представленные ссылками ниже.

Дополнительные ссылки по теме

Работа с цветами в canvas

  1. http://true-coder.ru/javascript/delaem-mir-canvas-yarche-primenenie-stilej-cvetov-i-tenej.html
  2. http://saitcreate.ru/primenenie-stilej-i-cvetov/

Цвета

  1. http://www.w3schools.com/cssref/css_colornames.asp
  2. http://stm.dp.ua/web-design/color-html.php
Эмиль Галеев
Эмиль Галеев

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

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

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

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

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

Анна Жирнова
Анна Жирнова
Украина, Киев
Антон Войлоков
Антон Войлоков
Россия, Алтайский край