JavaScript скрипты
Canvas - создание многоугольников
Вообще-то в HTML предусмотрено не так много способов создания элементов с формой, отличной от прямоугольной. Точнее, все элементы в HTML прямоугольники, но визуально, с помощью изображений, флеша и комбинаций мелких элементов картину сайта можно разнообразить.
Однако, существуют поддерживаемые современными браузерами технологии, которые позволят прямо на HTML-странице "нарисовать" всё, что сможем придумать: • Canvas – поддерживается Gecko и Opera 8.0+. • VML (Vector Markup Language) – поддерживается IE.
Немного о canvas
<canvas> - это HTML-элемент, использующийся для создания графики. По сути, canvas - это блочный элемент. Такой же прямоугольник, отличающийся от обычного DIV-а тем, что в нём с помощью JavaScript можно рисовать.Впервые canvas был разработан корпорацией Apple для браузера Safari. Поддержка в Gecko появилась с версии 1.5 (в Opera с версии 9.0). Для полноценной работы canvas требует от браузера не только поддержки HTML, но и JavaScript. Подробнее о canvas читаем здесь.
VML
VML – это XML-фича, сделанная Microsoft для проектирования двумерной векторной графики. Это приложение позволяет создавать простейшие векторные фигуры и объединять их в группы. Подробнее о VML читаем здесь (en).Explorer Canvas
Есть замечательная штука - Explorer Canvas (сокращенно eCanvas). Это js-файлик, который "учит" эксплорер понимать canvas и работать с ним. По сути, этот файлик занимается тем, что переводит инстуркции написанные, для canvas, на язык VML. Это существенно упрощает жизнь разработчику, т.к. писать при подключении такой фичи можно только для canvas, не владея VML.Теперь, имея представления о canvas, напишем простой скрипт, который, принимая в качестве аргументов id тега <canvas> и массив с координатами точек, будет рисовать многоугольник:
• Код JavaScript
// Функция, принимающая id тега <canvas> и массив координат
function drawPoly(id, arr) {
var canvas = document.getElementById(id).getContext('2d');
// Начинаем отрисовку
canvas.beginPath();
for (var i = 0; i < arr.length; i++) {
// Ставим точку на исходную позицию
if (i == 0) canvas.moveTo(arr[i][0], arr[i][1]);
// Рисуем линии от точки к точке
else canvas.lineTo(arr[i][0], arr[i][1]);
}
// Задаем цвет заливки в формате RGBA
canvas.fillStyle = "rgba(255,128,128,0.5)";
// Зальем полученный многоугольник цветом
canvas.fill();
}
// Многомерный массив с координатами
var coordArray = [
[100, 50],
[115, 80],
[150, 80],
[125, 100],
[135, 130],
[100, 110],
[65, 130],
[75, 100],
[50, 80],
[85, 80]
];
// Выведем в HTML-поток тег <canvas> и кнопку для запуска рисовалки
document.write(
"<canvas id='canvasId' width='200' height='200'></canvas>\
<br/><br/>\
<input type='button' value='Draw' onclick='drawPoly(\"canvasId\", coordArray)' />"
);
Совместимость с броузерами
Проверено в: - IE6; - Mozilla Firefox 1.5; - Opera 9.01+;Для того, чтобы скрипт не срабатывал в других обозревателях, ставьте ограничения. Воспользуйтесь простой функцией, которая определяет тип и версию браузера из приведенного выше списка:
function canvasBrowser() {
// Определяем тип браузера
var ua = navigator.userAgent.toLowerCase();
var isIE = (ua.indexOf("msie") != -1 && ua.indexOf("opera") == -1 && ua.indexOf("webtv") == -1);
var isOpera = ua.indexOf("opera") != -1;
var isFF = ua.indexOf("firefox") != -1;
var result = false;
// Разрешим все версии IE
if (isIE) result = true;
// Лису разрешим только с полторашки
else if (isFF) {
var ffVersion = parseFloat(ua.substring(ua.indexOf("firefox") + 8, ua.length));
if (ffVersion >= 1.5) result = true;
// Оперу, начиная с версии 9.0
} else if (isOpera) {
var operaVersion = parseFloat(ua.substring(ua.indexOf("opera") + 6, ua.length));
if (operaVersion >= 9.0) result = true;
}
return result;
}
Пример работы
Все права на статью принадлежат сайту fastcoder.org