webew
Войти » Регистрация
 
JavaScript :: Графика

Canvas - создание многоугольников

21 февраля 2008, 18:10
Нередко, с помощью JavaScript приходится показывать прямоугольные области (всплывающие подсказки, выпадающие меню и прочее). Но чтобы визуально элемент смотрелся не прямоугольником, мы прибегаем к услугам графики и CSS.

Вообще-то в 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 и массив с координатами точек, будет рисовать многоугольник:
// Функция, принимающая 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>");
document.write("<br/><br/>");
document.write("<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;
}

Рабочий пример




// Все права на статью JavaScript::Canvas - создание многоугольников принадлежат сайту 2007.fastcoder.ru
Добавить комментарий
© 2008—2017 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100