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

Canvas.Основы

< Лекция 19 || Практическая работа 6 || Практическая работа 7 >
Аннотация: В рамках данного практического занятия нами будут рассмотрены основы работы с элементом <canvas> (холст)

Целью занятия является ознакомление с элементом canvas, стилизацией canvas и создание простейших JavaScript – функций для генерации изображений в рамках элемента <canvas>.

Задание

  1. Разместить элемент <canvas> на странице.
  2. Создать файл стилей для <canvas>.
  3. При помощи JavaScript – функции реализовать генерацию следующих изображений на странице:
Задания для выполнения

Рис. 24.1. Задания для выполнения

Ход работ

Размещение <canvas> на странице

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

<canvas id="lesson6" width="150" height="150"></canvas>
24.1.

Атрибуты width и height не являются обязательными. По – умолчанию высота и ширина холста равны 150 и 300 пикселям соответственно. При явном задании размеров холста его картинка масштабируется соответствующим образом.

По аналогии с такими новыми тегами как <audio> и <video>, элементы, размещенные в рамках парного тега <canvas> будут отображаться на странице в том случае, если используемый пользователем браузер не поддерживает <canvas>.

Стилизация <canvas>

Стилизация холста не отличается от таковой для любого другого элемента веб – страницы. Могут быть заданы величины отступа, выравнивания, рамки и т.п.

Поскольку мы еще не создали функцию по отрисовке содержимого холста, то и в браузере мы ничего не увидим. Создадим стиль для элемента <canvas>, задающий параметры границы вокруг элемента:

canvas { border: 3px double black;}
24.2.

"Привязав" файл стилей к нашей странице и открыв ее в браузере, получим следующее:

Рамка вокруг элемента<canvas>

Рис. 24.2. Рамка вокруг элемента<canvas>

Рисование на холсте

Как мы уже говорили в лекциях, <canvas>; создаёт поверхность для рисования, предоставляющую один или более контекст отрисовки, который используется для создания отображаемого контента и манипуляций с ним. В настоящее время единственным определенным контекстом отрисовки является двумерный контекст.

Элемент <canvas> изначально пустой, и для того, чтобы что-либо отобразить, скрипту необходимо получить контекст отрисовки и рисовать уже на нём. Элемент canvas имеет DOM-метод, называемый getContext, и предназначенный для получения контекста отрисовки вместе с его функциями рисования. getContext() принимает один параметр - тип контекста. Осуществляется все вышесказанное следующим образом, в рамках JavaScript – функции:

var canvas = document.getElementById("lesson6");
var ctx = canvas.getContext("2d")
24.3.

Первая строка приведенного создает переменную, фактически являющуюся созданным нами холстом. Вторая – получает доступ к контексту рисования.

Теперь создадим наше первое изображение – прямоугольник багрового цвета.

Для этого, во – первых, создадим JavaScript – функцию (не забыв "привязать" файл веб – сценариев к html - странице):

function createImage() 
{
      var canvas = document.getElementById("lesson6");
      var ctx = canvas.getContext("2d");
}
24.4.

Прямоугольную закрашенную область можно нарисовать при помощи функции fillRect (x,y,w,h), где x и yкоординаты левой верхней вершины прямоугольника (по горизонтали и вертикали соответственно), а w и h – значения ширины и высоты прямоугольника, соответственно.

Функция strokeRect (x,y,w,h) рисует границы прямоугольника, clearRect (x,y,w,h) – очищает заданную прямоугольную область.

Функция fillStyle задает цвет рисования.

Таким образом, итоговая функция будет выглядеть так:

function createImage() 
    {
      var canvas = document.getElementById("lesson6");
      var ctx = canvas.getContext("2d");
        ctx.fillStyle = "rgb(100,0,0)"
        ctx.fillRect (20, 10, 50, 70);
     }
24.5.

Функция готова, холст уже давно размещен на странице, осталось обеспечить выполнение функции. Для того, чтобы изображение отрисовывалось в момент загрузки страницы, добавим в тег <body> вызов функции createImage при загрузке. html – код нашего примера будет выглядеть следующим образом:

<body onload="createImage();">
   <canvas id="lesson6" width="150" height="150"></canvas>
 </body>
24.7.

Открыв страницу в браузере, увидим:

Результат выполнения функции createImage

Рис. 24.3. Результат выполнения функции createImage

Самостоятельно нарисуйте изображения, приведенные в задании.

< Лекция 19 || Практическая работа 6 || Практическая работа 7 >
Эмиль Галеев
Эмиль Галеев

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

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

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

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

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

Елена Игнатко
Елена Игнатко
Россия, Москва