Canvas - създаване на полигони - статия за

Всъщност в HTML няма много начини за създаване на неправоъгълни елементи. По-точно всички елементи в HTML са правоъгълници, но визуално, с помощта на изображения, флаш и комбинации от малки елементи, може да се разнообрази картината на сайта.

Има обаче технологии, поддържани от съвременните браузъри, които ще ви позволят да „начертаете“ всичко, което можем да измислим директно върху HTML страница: –Canvas – поддържа се от Gecko и Opera 8.0+. –VML (Vector Markup Language) – IE се поддържа.

Малко за платното

Explorer Canvas

Има едно прекрасно нещо - Explorer Canvas (накратко eCanvas). Това е js файл, който "учи" изследователя да разбира canvas и да работи с него. Всъщност този файл се занимава с превод на инструкциите, написани за canvas, на езика VML. Това значително опростява живота на разработчика, т.к. можете да пишете, когато свързвате такава функция само за платно, без да притежавате VML.

Сега, като имаме представа за canvas, нека напишем прост скрипт, който, като вземе идентификатора на тага canvas и масив с координати на точки като аргументи, ще начертае многоъгълник:

// Функция, която взема идентификатор на етикет и масив от координати функция drawPoly ( id, arr ) < varcanvas = документ. getElementById ( id ) . getContext('2d'); // Започнете изобразяване на платно. beginPath(); for ( var i = 0 ; i и бутон за стартиране на чекмеджето document. write ( " ") ; document. write ( "

Регистрирал се

- IE6; - Mozilla Firefox 1.5; - Opera 9.01+;

За да не работи скриптът в други браузъри, задайте ограничения. Използвайте проста функция, която определя типа и версията на браузъра от списъка по-горе:

функция canvasBrowser() < // Дефиниране на тип браузър var ua = навигатор. userAgent. toLowerCase(); var isIE = ( ua.indexOf ( "msie" ) != -1 && ua.indexOf ( "opera" ) == -1 && ua.indexOf ( "webtv" ) == -1 ) ; var isOpera = ua. indexOf ( "opera" ) != -1 ; вар. isFF = ua. indexOf ( "firefox" ) != -1 ;

varresult = невярно; // Разрешаване на всички версии на IE if ( isIE ) result = true ; // Нека разрешим лисицата само от един и половина else if ( isFF ) < var ffVersion = parseFloat ( ua. подниз ( ua. indexOf ( "firefox") + 8, ua. дължина ) ) ; if (ffVersion >= 1.5) result = true; // Opera от версия 9.0 > иначе ако ( isOpera ) < var operaVersion = parseFloat ( ua. substring ( ua. indexOf ( "opera" ) + 6 , ua. length ) ) ); if ( operaVersion >= 9.0 ) result = true ; > връща резултат; >

---