Как нарисовать круг, линию ил и прямоугольник на javascript
Walter Zorn написал интересную библиотеку (High Performance JavaScript Vector Graphics Library), которая позволяет на ява-скрипте рисовать графические примитивы. Причем работает на чистом js, без всяких флешовый заморочек, апплетов и т.п.
Рисует следующие элементы:
- Линия (drawLine);
- Ломаную линию (drawPolyline);
- Прямоугольник (drawRect);
- Полигон (drawPolygon);
- Эллипс(drawEllipse);
- Текст (drawString);
- Картинку (drawImage)
Работает под всеми последними браузерами (лично проверял под 8й Оперой и 6м ИЕ).
Все рисуеться исключительно дивами.
Вот код который выводит прямоугольник:
function mkRect(x, y, w, h)
{
var s = this.stroke;
this.mkDiv(x, y, w, s);
this.mkDiv(x+w, y, s, h);
this.mkDiv(x, y+h, w+s, s);
this.mkDiv(x, y+s, s, h-s);
}
А вот функция mkDiv (уже по названию можно догадаться что она делает):
function mkDiv(x, y, w, h)
{
this.htm += '<div style="position:absolute;'+
'left:' + x + 'px;'+
'top:' + y + 'px;'+
'width:' + w + 'px;'+
'height:' + h + 'px;'+
'clip:rect(0,'+w+'px,'+h+'px,0);'+
'background-color:' + this.color +
(!jg_moz? ';overflow:hidden' : '')+
';"></div>';
}
Особой пользы я от возможности рисовать в браузере не вижу, но все-таки, прогресс не остановить.
Leave a Reply
You must be logged in to post a comment.