Опубликован: 01.08.2012 | Уровень: для всех | Доступ: платный | ВУЗ: Томский политехнический университет
Лекция 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. Пример очистки прямоугольной области холста
Сергей Крупко
Сергей Крупко

Добрый день.

Я сейчас прохожу курс  повышения квалификации  - "Профессиональное веб-программирование". Мне нужно получить диплом по этому курсу. Я так полагаю нужно его оплатить чтобы получить диплом о повышении квалификации. Как мне оплатить этот курс?

 

Галина Башкирова
Галина Башкирова

Здравствуйте, недавно закончила курс по проф веб программиованию, мне прислали методические указания с примерами тем, однако темы там для специальности 

Системный администратор информационно-коммуникационных» систем.
Мне нужно самой найти тему? или делать по высланным темам

 

Алексей Бегунов
Алексей Бегунов
Беларусь
Виктор Лабутин
Виктор Лабутин
Россия