Лабораторная работа №12 Внедрение рисунков
1. Основные положения
Для выполнения рисунков в браузере его, точнее его часть нужно перевести в графический режим, точнее получить доступ к каждому пикселю. Для этого предназначен тег <CANVAS>. Canvas — это растровый холст, на котором можно рисовать с помощью методов JavaScript, предоставляющий базовые возможности: отрисовку примитивов и текста, побитовый доступ к изображению, вывод изображений и афинные преобразования контекста отрисовки. Canvas имеет около 40 методов и 20 атрибутов, которые можно разбить на несколько групп (см. например, вот эту шпаргалку).
CANVAS
Тег <canvas> предоставляет ограниченную область для рисования в ней. Она используется для рисования графики с помощью JavaScript. Вот так выглядит описание этого элемента:
<canvas id="example" width="400" height="200"></canvas>
Здесь два обязательных атрибута - width и height, которые обозначают длину и высоту области рисования соответственно. Если они не указаны, то по умолчанию длина будет равно 300 пикселей, а высота 150 пикселей. Важно заметить, что этот тег обязательно должен закрываться. т.е. должен выглядеть так:
<canvas ...></canvas> ,
но никак не
<canvas ... /> .
Иногда рисунок нужно заключить в рамку. Для этого можно использовать атрибут style. Например
style='border:1px solid' style='border:1px solid'
Тег <canvas> это элемент HTML, но работать с ним можно используя код javascript. Как сделать это показано в следующем примере:
//Сначала нужно получить объект canvas
var canvas = document.getElementById('example');//example это id тега
//потом нужно получить контекст, т.е. информацию об объекте canvas
var ctx = canvas.getContext('2d');
Не все браузеры поддерживают HTML5. Поэтому рассмотрим как проверить поддержку Canvas API средствами JavaScript:
var canvas = document.getElementById('example');
if (canvas.getContext){
var context = canvas.getContext('2d');
// здесь размещается код рисования на canvas
}else{
// здесь размещается код, который обрабатывается если браузер не поддерживает Canvas API
}
В дальнейшем будем предполагать, что используемый браузер поддерживает элемент canavas
Рисование прямоугольников
|
Метод |
Описание |
|
fillRect(x,y,ширина,высота) |
Рисует закрашенный прямоугольник. x,y- координаты левого верхнего угла |
|
strokeRect(x,y,ширина,высота) |
Рисует не закрашенный прямоугольник. |
|
clearRect(x,y,ширина,высота) |
Очищает указанную зону делая ее полностью прозрачной. |
Обратите внимание: параметры x и y задают величину смещения прямоугольника по горизонтали (x) и вертикали (y) от верхнего левого угла холста в пикселях.
<html>
<body>
<canvas id='draw' width='300' height='200' style='border:1px solid'></canvas>
<script type='text/javascript'>
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
x.fillRect(50,40,55,55);
x.strokeRect(150,70,55,55);
x.clearRect(68,57,20,20);
</script>
</body>
</html>
Объяснение примера:
var canvas=document.getElementById("draw") - находим нужный холст;
var x=canvas.getContext("2d") - обращаемся ко встроенному объекту, который содержит различные методы для рисования (первые два шага являются стандартными для рисования любого объекта в canvas);
x.fillRect(50,40,55,55) - рисуем закрашенный прямоугольник;
x.strokeRect(150,70,55,55) - рисуем не закрашенный прямоугольник;
x.clearRect(68,57,20,20) - очищаем зону в закрашенном прямоугольнике