dessiner des cercles sur chaque élément de travée

Question

Je veux dessiner des cercles sur des caractères que j'ai donnés un élément de travée. Je l'ai déjà travaillé avec un élément (voir le code commenté). Je veux seulement le faire par chaque élément de portée. Pour commencer, j'ai d'abord essayé de le faire avec un vol stationnaire mais j'ai déjà échoué à cela. Instand d'un hover il devrait juste arriver quand le draw de fonction est appelé.

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

cela est au moins proche de ce que vous recherchez, le travail du vol stationnaire, il dessine des cercles, mais il relie aussi les cercles, devraient être en mesure de fixer facilement que (peut-être avec 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); 
    }); 
} 

Je pense que la question principale est peut-être où vous utilisiez $(this).offsetLeft; pour obtenir des compensations (où $(this) est un jQuery objet). this.offsetLeft travaillé.

---

Après la pensée:

Je ne sais pas ce que votre objectif final est, mais vous pouvez aussi faire un box-shadow simple, autour de la durée avec CSS

example jsfiddle

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