Рисование линии между двумя HTML элементами

Скопировано

<p>текст текст текст <span class='w1'>слово</span> текст текст текст текст </p>
<br><br><br><br><br><br><br><br><br>
<p>текст текст текст текст текст текст текст текст текст текст <span class='w2'>слово</span> текст текст текст текст </p>

Показать код

Скопировано

body {
	font-family: 'Arial', san-serif;
}
span {
	font-weight: bold;
	font-size: 18px;
}

Показать код

Скопировано

var w1 = $('.w1');
var w2 = $('.w2');
// координаты первого элемента
var w1_xy = {
	x: w1.offset().left + w1.width() / 2,
	y: w1.offset().top + w1.height() / 2
};
// координаты второго элемента
var w2_xy = {
	x: w2.offset().left + w2.width() / 2,
	y: w2.offset().top + w2.height() / 2
};
// определим координаты canvas
var canvas_xy = {
	x1: w1_xy.x < w2_xy.x ? w1_xy.x : w2_xy.x,
	x2: w1_xy.x > w2_xy.x ? w1_xy.x : w2_xy.x,
	y1: w1_xy.y < w2_xy.y ? w1_xy.y : w2_xy.y,
	y2: w1_xy.y > w2_xy.y ? w1_xy.y : w2_xy.y
};
var canvas_w = canvas_xy.x2 - canvas_xy.x1;
var canvas_h = canvas_xy.y2 - canvas_xy.y1;
var canvas = $('<canvas/>').attr({
	'width': canvas_w,
	'height': canvas_h
}).css({
	'position': 'absolute',
	'left': canvas_xy.x1,
	'top': canvas_xy.y1,
	'z-index': 2
}).appendTo($('body'))[0].getContext('2d');
// рисуем линию
canvas.strokeStyle = '#f00';
canvas.lineWidth = 2;
canvas.beginPath();
canvas.moveTo( w1_xy.x - canvas_xy.x1, w1_xy.y - canvas_xy.y1 );
canvas.lineTo( w2_xy.x - canvas_xy.x1, w2_xy.y - canvas_xy.y1 );
canvas.stroke();

Показать код