Javascript 在每个跨度元素上画圆

我想在我给了span元素的字符上画圆圈。我已经使用了一个元素（参见注释代码）。我只想对每个跨度元素都这样做。 首先我试着用悬停来做，但我已经失败了。当调用函数draw get时，应该会发生悬停

function draw() {  
    ctx.save();
    ctx.translate(plotX1, 0);

    $("p").find("span").hover(function(){

            console.log("hover");
            var x = $(this).offsetLeft;
            var y = $(this).offsetTop;
            y += $(this).offsetHeight;
            ellipse(ctx, x, y, 10);
            ctx.strokeStyle = "rgba(200, 0, 0, 50)";
            ctx.stroke();   
    });


    ctx.restore();

    /*
// this worked on the element with id s2
    var x = s2.offsetLeft;
    var y = s2.offsetTop;
    y += s2.offsetHeight;
    ctx.fillStyle = "rgb(0, 250, 0)";
    //ctx.fillRect(x, y, 10, 10);
    ellipse(ctx, x, y, 10);
    ctx.strokeStyle = "rgba(200, 0, 0, 50)";
    ctx.stroke();
    */

}  

这至少更接近您所寻找的，悬停的工作，它绘制圆，但它也连接圆，应该能够轻松地修复（可能使用

ctx.moveTo（）

）

我认为主要的问题可能是您使用

$（this）的地方

获取偏移量（其中

$（this）

是jQuery对象）<代码>此.offsetLeft工作正常

---

经过思考：

不确定你的最终目标是什么，但你也可以用CSS在跨度周围做一个简单的

框影



这至少更接近您所寻找的，悬停的工作，它绘制圆，但它也连接圆，应该能够轻松地修复（可能使用
ctx.moveTo（）
）

我认为主要的问题可能是您使用
$（this）的地方
获取偏移量（其中
$（this）
是jQuery对象）<代码>此.offsetLeft工作正常


经过思考：

不确定你的最终目标是什么，但你也可以用CSS在跨度周围做一个简单的
框影


用你的代码我什么也看不到。可能是因为画布覆盖了整个页面（我也不能选择文本）。画布覆盖整个页面必须保持这种状态。这条线是干什么的$（#canv'）.attr（'width'，$（'p'）.width（））.attr（'height'，$（'p'）.height（））<代码>$（'canv'）.attr（'width'，$（'p'）.width（））.attr（'height'，$（'p'）.height（））将画布大小设置为与段落相同的大小。我看不到你所看到的，使用Chrome，圆圈显示出来，我可以选择文本。在Firefox中获得不同的结果，可以选择文本，但当我将鼠标悬停在其上方时，跨距上只显示一个圆圈。我将x和y记录到控制台，x未定义，y为nan。对于您的代码，我什么也看不到。可能是因为画布覆盖了整个页面（我也不能选择文本）。画布覆盖整个页面必须保持这种状态。这条线是干什么的$（#canv'）.attr（'width'，$（'p'）.width（））.attr（'height'，$（'p'）.height（））<代码>$（'canv'）.attr（'width'，$（'p'）.width（））.attr（'height'，$（'p'）.height（））将画布大小设置为与段落相同的大小。我看不到你所看到的，使用Chrome，圆圈显示出来，我可以选择文本。在Firefox中获得不同的结果，可以选择文本，但当我将鼠标悬停在它们上方时，跨距上只显示一个圆圈。我将x和y记录到控制台，x未定义，y为nan。
function draw() {
    $('#canv').attr('width', $('p').width()).attr('height', $('p').height());

    //ctx.translate(plotX1, 0);
    $('p span').hover(function() {
        ctx.save();

        var x = this.offsetLeft,
            y = this.offsetTop;
        y += this.offsetHeight / 2;

        //ctx.moveTo(x, y);

        ellipse(ctx, x, y, 10);

        ctx.strokeStyle = "rgba(200, 0, 0, 50)";
        ctx.stroke();

        ctx.restore();
    }, function() {
        clearCanvas(ctx);
    });
}

p span:hover {box-shadow:0 0 0 2px #f00;border-radius:10px;}