Question

我想在我给出span元素的字符上绘制圆圈。我已经使用了一个元素（参见注释代码）。我只希望每个span元素都这样做。首先，我首先尝试用悬停做，但我已经失败了。当函数绘制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做一个简单的box-shadow跨越范围

example jsfiddle

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

在每个span元素上绘制圆圈

1 个答案: