在每个 span 元素上绘制圆圈

Question

我想在我给了 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();
    */

}  

Answer 1

example jsfiddle

这至少更接近您正在寻找的东西，悬停的工作，它绘制圆圈，但它也连接圆圈，应该能够轻松解决这个问题（也许ctx.moveTo()）

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);
    });
}

我认为主要问题可能是您使用$(this).offsetLeft; 获取偏移量的位置（其中$(this) 是一个jQuery 对象）。 this.offsetLeft 工作。

---

想了想：

不确定您的最终目标是什么，但您也可以使用 CSS 围绕 span 做一个简单的box-shadow

example jsfiddle

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