canvas绘制html元素,javascript–使用jquery和canvas从html元素id到另一个html元素绘制线条...

我做了一个非常粗略的例子,说明我是怎么做的.它应该让你在正确的轨道上&＃xff1a;

我将class line用于hoverable元素,并使用data-id属性作为相应的元素.

HTML&＃xff1a;

This is my text with this very important word

o asf isj biojso jo f ad f

jQuery的&＃xff1a;

$(&＃39;.line&＃39;).hover(function () {

var $t &＃61; $(this);

var $i &＃61; $(&＃39;#&＃39; &＃43; $t.data(&＃39;id&＃39;));

// find offset positions for the word (t &＃61; this) and image (i)

var ot &＃61; {

x: $t.offset().left &＃43; $t.width() / 2,

y: $t.offset().top &＃43; $t.height() / 2

};

var oi &＃61; {

x: $i.offset().left &＃43; $i.width() / 2,

y: $i.offset().top &＃43; $i.height() / 2

};

// x,y &＃61; top left corner

// x1,y1 &＃61; bottom right corner

var p &＃61; {

x: ot.x

x1: ot.x > oi.x ? ot.x : oi.x,

y: ot.y

y1: ot.y > oi.y ? ot.y : oi.y

};

// create canvas between those points

var c &＃61; $(&＃39;&＃39;).attr({

&＃39;width&＃39;: p.x1 - p.x,

&＃39;height&＃39;: p.y1 - p.y

}).css({

&＃39;position&＃39;: &＃39;absolute&＃39;,

&＃39;left&＃39;: p.x,

&＃39;top&＃39;: p.y,

&＃39;z-index&＃39;: 1

}).appendTo($(&＃39;body&＃39;))[0].getContext(&＃39;2d&＃39;);

// draw line

c.strokeStyle &＃61; &＃39;#f00&＃39;;

c.lineWidth &＃61; 2;

c.beginPath();

c.moveTo(ot.x - p.x, ot.y - p.y);

c.lineTo(oi.x - p.x, oi.y - p.y);

c.stroke();

}, function () {

$(&＃39;canvas&＃39;).remove();

});

演示&＃xff1a;