Jquery html5 canvas changer la couleur variable

Question

Essayer de faire quelque chose le long de ces lignes. Changer la couleur de l'objet de toile quand $ cette css est .current

var links = $("ul#nav-main a"); 

links.each(function() { 
    var linkWidth = $(this).outerWidth(); 
    var canvas = $("<canvas></canvas>"); 
    canvas.attr({width: linkWidth, height: 48}); 
    var ctx = canvas.get(0).getContext("2d"); 
    var linkColor = "rgba(27, 73, 218, 0.5)"; 
    if links.css('.current'){ 
     linkColor = "red" 
    } 
    ctx.save(); 
      ctx.beginPath(); 
      ctx.moveTo(linkWidth, 45.0); 
      ctx.lineTo(6.5, 46.3); 
      ctx.lineTo(0.0, 0.0); 
      ctx.lineTo(linkWidth-2, 2.0); 
      ctx.lineTo(linkWidth-4, 45.0); 
      ctx.closePath(); 
      ctx.fillStyle('linkColor'); 
      ctx.fill(); 
      ctx.restore(); 

    var image = canvas.get(0).toDataURL("image/png"); 
    $(this).hover(function() { 
       $(this).css({background: "url('"+image+"') no-repeat"}); 
    }, function() { 
    $(this).css({background: ""}); 
    }); 
}); 

Answer 1

Remplacer cette partie

if links.css('.current'){ 
    linkColor = "red" 
} 

avec

if $(this).hasClass('current') { 
    linkColor = "#f00"; 
} 

où $(this) referres à l'élément courant dans la boucle each() en tant qu'objet jQuery et hasClass() renvoie true si l'attribut de classe elements contient la classe CSS.

Pour ne pas encore connaître l'élément canvas, je pense également que vous devriez remplacer ctx.fillStyle('linkColor'); par ctx.fillStyle = linkColor;.

Pourquoi appelez-vous ctx.save(); avant de définir la couleur (et d'autres) et puis ctx.restore(); une fois que vous avez?

MISE À JOUR

créé un solution at jsFiddle pour vous, profitez! :)