131.50Kb
advertisement
УДК 371.134
ВОЗМОЖНОСТИ СОВРЕМЕННЫХ БРАУЗЕРОВ ДЛЯ РАБОТЫ С
РАСТРОВОЙ ГРАФИКОЙ
Шоманбаева М.Т., Кулжатаева К.М.
Түйін
Бұл мақалада HTML5 тілінің canvas тегі туралы айтылады. Ол қазіргі заманауи браузерлердің
растрлық графикамен жұмыс жасауға арналған көмекші құралы болып табылады.
Summary
In this paper we consider the HTML5 canvas, which is embedded possibility of modern browsers for
working with the raster graphics
С помощью данной технологии можно рисовать различные вещи,
начиная от простых геометрических фигур и заканчивая сложными
композициями, взаимодействующими с пользователем.
Тег canvas не входил ни в один из стандартов, его придумала и
реализовала в своем браузере safari компания apple. Идею подхватила группа
разработчиков mozilla и добавила поддержку тега canvas в движок htmlрендеринга gecko используемого в firefox и смежных продуктах.
Затем инновацию поддержала компания Opera Software, и, начиная с 9ой версии, браузер opera также знает тег canvas. Самые “активные”
разработчики самого “передового” браузера (имеется в виду iexplorer) в это
время как всегда спали. К счастью novell и google начали проекты по
реализации плагина поддерживающего canvas для iexplorer-а.
Спецификация HTML 5 включает множество новых функций, одной из
которых является тег canvas. HTML 5 Canvas (канва HTML 5) предоставляет
простой и мощный способ вывода графики и рисования с использованием
JavaScript [1]. Для каждого элемента canvas можно использовать контекст, в
котором нужно вызвать команды JavaScript для рисования на Canvas.
Браузеры могут реализовывать несколько контекстов элемента canvas и
предоставлять различные API для рисования. Следует также помнить, что
рисование происходит в растровой форме, то есть, нарисовав на канве какуюлибо фигуру, её нельзя будет изменить или удалить отдельно, — можно
только стереть целую область канвы.
Основы использования Canvas. Чтобы создать Canvas-контекст,
достаточно просто добавить элемент <canvas> в HTML-документ:
<canvas id="myCanvas" width="300" height="150">
Альтернативное содержимое, которое будет показано, если браузер не
поддерживает Canvas.
</canvas>
Нужно добавить идентификатор к элементу canvas, чтобы потом
обратиться к нему в JavaScript, также необходимо задать атрибуты width и
height для определения ширины и высоты элемента canvas.
Для рисования внутри элемента canvas, нужно использовать JavaScript.
Сначала нужно найти созданный тег canvas с помощью функции
getElementById, а потом инициализировать нужный контекст. Как только это
будет сделано, можно начинать рисование на канве, используя доступные
API-команды выбранного контекста.
Самый простой пример использования canvas - это просто вставить его в
тело html документа, не забыв про fallback. Проще говоря, если браузер
клиента не поддерживает данный тег, то он должен увидеть некоторое
поясняющее сообщение. В примере ниже это размещенное внутри тега
canvas изображение.
<html><head>
<script><!—именно здесь будут размещаться функции, которые рисуют на
canvas-->
</script>
</head> <body>
<canvas id="canva" width="400" height="400" style="border: 1px solid
black;">
<img src="no_canvas_sorry.jpg" />
</canvas>
<button onclick="draw()">draw!</button>
<!—эта кнопка вызывает некоторую функцию рисования -->
</body></html>
Следующий шаг это создание функции, которая будет вызываться при
нажатии на кнопку button. Функция должна получить доступ к объекту
“canva”, для этого мы применим стандартный метод getElementById (“тот
самый идентификатор объекта, который вы, надеюсь, не забыли задать”).
Для того чтобы нарисовать прямоугольник есть три функции: fillRect,
strokeRect, clearRect – которые соответственно рисуют прямоугольник
сплошным цветом, только границу прямоугольника, очищают часть области
рисования. Все эти функции получают в качестве параметра координаты
левого верхнего угла прямоугольника и его размеры.
function draw(){
var canvas = document.getElementById("canva");
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// предупреждая следующий вопрос, нет, трехмерного контекста рисования
нет,
// рисовать можно только на плоскости
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
ctx.fillStyle = "rgb(0,0,0)"; // черный цвет
ctx.fillRect(100,100,100,100);
ctx.clearRect(125,125,60,60);
ctx.strokeRect(150,150, 120,120);
}
}
С помощью этой функции мы получим изображение на рисунке ниже:
Если вам необходимо нарисовать более сложную фигуру, то следует
использовать Path. Path – это просто путь по которому водится
виртуальный карандаш. Путь должен начаться, карандаш проводит
несколько линий (дуг, кривых Безье, прямоугольников и т.д.), затем путь
закрывается (этот шаг необязателен, например, вы сами довели линию от
последней точки к первой). И последний шаг – это запуск отрисовки либо
контура Path, либо ее закраска, как вариант рисуется и контур и фоновая
закраска одновременно.
Для того чтоб нарисовать линию вы используете две базовые функции
moveTo(x,y), и lineTo(x,y). Первая из них поднимает невидимый карандаш
и перемещает его в точку (x,y), а вторая перемещает карандаш в точку
(x,y) уже ведя карандаш по “листу”.
Если вам хочется нарисовать круг, дугу, то используйте функцию
arc(x,y,radius, startAngle, endAngle, anticlockwise), ее параметры
соотвественно координаты центра круга или дуги, затем идет радиус,
параметры startAngle и endAngle – задают начало и конец дуги в радианах
(и это важно), последним идет параметр anticlockwise – логический
признак того, будет ли дуга рисоваться по часовой или против часовой
стрелки. В примере ниже нарисованы две звезды, одна из которых
отображается в виде контура, вторая в виде заливки сплошным цветом,
также рисуется пример дуги. Для того чтобы задать цвет контура
используется свойство strokeStyle.
function draw(){
var canvas = document.getElementById("canva");
if (canvas.getContext){
var ctx1 = canvas.getContext('2d');
var ctx2 = canvas.getContext('2d');
ctx1.beginPath ();
ctx2.beginPath ();
var deltaI = 0.1;
ctx1.moveTo ( 200 + 100*Math.cos(0), 200 - 100*Math.sin(0) );
ctx2.moveTo ( 200 + 170*Math.cos(0), 200 - 170*Math.sin(0) );
for (var i = 0; i < 2 * Math.PI; i+= deltaI){
ctx1.lineTo ( 200 + 100*Math.cos(i ), 200 - 100*Math.sin(i) );
ctx1.lineTo ( 200 + 150*Math.cos(i + deltaI), 200 - 150*Math.sin(i + deltaI) );
ctx2.lineTo ( 200 + 170*Math.cos(i ), 200 - 170*Math.sin(i) );
ctx2.lineTo ( 200 + 190*Math.cos(i + deltaI), 200 - 190*Math.sin(i + deltaI) );
}
ctx1.closePath ();
ctx1.stroke ();
ctx2.closePath ();
ctx2.fillStyle="rgb(120,78,89)";
ctx2.fill();
}
ctx1.strokeStyle = "rgba(255,255,255,125)";
ctx1.beginPath ();
ctx1.arc (200, 200,40, 45 * (Math.PI / 180), 315 * (Math.PI / 180), false);
ctx1.closePath();
ctx1.stroke ();
}
Обратите внимание на то, что в данном примере использованы одновременно
два контекста рисования, которые заданы с помощью переменных var ctx1 =
canvas.getContext('2d') и var ctx2 = canvas.getContext('2d'). Подставив
программный код этой функции между тегами скрипта javascript, получим
полный код веб-страницы:
<html>
<head>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById("canva");
if (canvas.getContext){
var ctx1 = canvas.getContext('2d');
var ctx2 = canvas.getContext('2d');
ctx1.beginPath ();
ctx2.beginPath ();
var deltaI = 0.1;
ctx1.moveTo ( 200 + 100*Math.cos(0), 200 - 100*Math.sin(0) );
ctx2.moveTo ( 200 + 170*Math.cos(0), 200 - 170*Math.sin(0) );
for (var i = 0; i < 2 * Math.PI; i+= deltaI){
ctx1.lineTo ( 200 + 100*Math.cos(i ), 200 - 100*Math.sin(i) );
ctx1.lineTo ( 200 + 150*Math.cos(i + deltaI), 200 - 150*Math.sin(i + deltaI) );
ctx2.lineTo ( 200 + 170*Math.cos(i ), 200 - 170*Math.sin(i) );
ctx2.lineTo ( 200 + 190*Math.cos(i + deltaI), 200 - 190*Math.sin(i + deltaI) );
}
ctx1.closePath ();
ctx1.stroke ();
ctx2.closePath ();
ctx2.fillStyle="rgb(120,78,89)";
ctx2.fill();
}ctx1.strokeStyle = "rgba(255,255,255,125)";
ctx1.beginPath ();
ctx1.arc (200, 200,40, 45 * (Math.PI / 180), 315 * (Math.PI / 180), false);
ctx1.closePath();
ctx1.stroke ();
}</script>
<body>
<canvas id="canva" width="400" height="400" style="border: 1px solid black;">
<img src="no_canvas_sorry.jpg" />
</canvas>
<button onclick="draw()"> draw!</button><!—эта кнопка вызывает некоторую
функцию рисования -->
</body>
</html>
При нажатии на кнопку «draw!» появится следующее изображение:
Выводы. Canvas — одна из самых интересных возможностей HTML 5,
которую уже можно использовать во многих современных браузерах.
Например, с помощью canvas'а, вы сможете динамично нарисовать график,
исходя из каких-то данных. Или создавать крутые игры, которые будут
выглядеть лучше, а работать быстрее, чем игры на flash. В интернете полно
примеров, которые вы можете просмотреть в свободном доступе. Canvas
предоставляет возможности для создания игр и пользовательских
интерфейсов совершенно нового уровня. 2D context API включает в себя
множество функций; в этой статье мы коснулись только некоторой части из
них. Отметим, что HTML5 позволяет разработчику создавать графические
изображения и анимации в браузере на программном уровне, средствами
JavaScript также с использованием технологии SVG (Scalable Vector Graphics)
— альтернативного механизма рисования в браузере, который является
средством создания векторной графики в разметке XML [2].
Литература
1. Лоусон Б., Шарп Р. Изучаем HTML5. Библиотека специалиста. СПб.:Питер,2011.–272 с.
2. Хоган Б. HTML5 и CSS3. Веб-разработка по стандартам нового поколения. 2-е изд.
СПб.: Питер, 2014. — 320 с.