Как нарисовать круг, линию ил и прямоугольник на 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