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

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

Вообще-то в HTML предусмотрено не так много способов создания элементов с формой, отличной от прямоугольной. Точнее, все элементы в HTML прямоугольники, но визуально, с помощью изображений, флеша и комбинаций мелких элементов картину сайта можно разнообразить.

Однако, существуют поддерживаемые современными браузерами технологии, которые позволят прямо на HTML-странице «нарисовать» всё, что сможем придумать:

  • Canvas – поддерживается Gecko и Opera 9.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;
}

И на последок...

Шпаргалка по Canvas

http://2.bp.blogspot.com/_OjchJpvqFiw/SaGveJKyTTI/AAAAAAAAAgY/swOCfkuoXSs/s200/HTML5-Canvas-Cheat-Sheet.png

Глядим и используем

  • Думал, это только грядёт в 5-м хтмле. А оказывается, уже давно есть. Но что-то как-то лень совсем вникать )

    А в прямом эфире форму можно менять?

Запись навигация

Top