Реализовать визуальные связи на html странице

программирование html JavaScript canvas

Всем привет.
Задача отрисовать линиями связи между разными блоками.
Ссылка на изображение:
http://s1.hostingkartinok.com/uploads/images/2014/05/59429f61e8735d63b69899c2e5bc244c.png

Подскажите можно ли реализовать это без канваса?

Примечание:
slo_nik, очень трудоемко. К тому же все скрины вкидываются динамично и их может быть реально много.
Страшно себе представить страницу с десятками тысяч таких дивов )))

Примечание:
Решил все канвасом. Получилось не так страшно, как казалось )))

canvas = $('canvas');
ctx = canvas.get(0).getContext("2d");
canvas.attr({
'width': $('.main').innerWidth(),
'height': $('.main').innerHeight()
});

// Массив координат
line_prop = [
[
['#00ff00'],
[123, 80],
[50, 80],
[50, 3359],
[236, 3359],
[236, 3377],
]
];

// Отрисовка связей
for(i=0; i<=line_prop.length - 1; i++){
ctx.beginPath();
ctx.arc(line_prop[i][1][0], line_prop[i][1][1], 4, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fillStyle = line_prop[i][0];
ctx.fill();

ctx.beginPath();
ctx.moveTo(line_prop[i][1][0], line_prop[i][1][1]);
for(j=1; j<=line_prop[i].length -1; j++){
ctx.lineTo(line_prop[i][j][0], line_prop[i][j][1]);
}
ctx.strokeStyle = line_prop[i][0];
ctx.lineWidth = 2;
ctx.stroke();
}
});
Ответы:
блоки шириной/высотой в пару пикселей, с разными цветовыми фонами и разным позиционированием...
Можно в canvas нарисовать


10 лет назад

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.