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

HTML5. Работа с Canvas

Аннотация: Добавление canvas на страницу. Рисование простейших фигур. Работа с цветом и толщиной линий. Работа с положением пера. Рисование прямых линий. Рисование дуг и кривых. Рисование кривых Безье. Вывод текста.

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

Добавление элемента canvas на страницу

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

<canvas height="200" width="200"></canvas>

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

Для упрощения работы добавим рамку, окружающую холст и зададим атрибут id.

<canvas id="canvas" style="border: 2px solid black" width="200" height="200"> </canvas>

В браузере наш холст будет отображен следующим образом:

 Холст с рамкой

Рис. 23.1. Холст с рамкой

Рисование простейших фигур

Прямоугольники

Для отрисовки прямоугольных фигур используются методы strokeRect для прямоугольника без заливки цветом, и fillRect для прямоугольника залитого цветом.

Для иллюстрации примеров лекции, создадим HTML – файл, для простоты разместим JavaScript код в рамках самой страницы:

<html>
 <head>
  <script type="application/x-javascript">
    function createImage() 
    {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    }
  </script>
    
    
 </head>
 <body onload="createImage();">
   <canvas id="canvas" style="border: 2px solid black" width="200" height="200"> </canvas>
 </body>
</html>

Функция createImage вызывается при загрузке тела html – документа. В рамках самой функции мы получаем ссылку на сам холст (canvas) и ссылку на контекст (ctx).

Рассмотрим подробнее метод и его параметры:

 strokeRect (x,y,w,h)

x и yкоординаты верхней левой вершины прямоугольника (по горизонтали и вертикали соответственно);

w и h – ширина и высота прямоугольника соответственно.

Метод fillRect принимает те же параметры, что и strokeRect.

Изменим функцию createImage следующим образом, для отрисовки двух квадратов:

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

В результате, получим холст:

 Пример отрисовки прямоугольников

Рис. 23.2. Пример отрисовки прямоугольников

Метод clearRect, принимающий те же параметры, что fillRect и strokeRect, позволяет очистить прямоугольную область. Добавим следующую строку в метод createImage:

ctx.clearRect(50,50,50,50);

В результате холст изменится таким образом:

 Пример очистки прямоугольной области холста

Рис. 23.3. Пример очистки прямоугольной области холста
Эмиль Галеев
Эмиль Галеев

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

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

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

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

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

Kirill Korobchinskiy
Kirill Korobchinskiy
Украина, Харьков, Национальный аэрокосмический университет "ХАИ", 2005
Александр Кудаков
Александр Кудаков
Россия