jquery html5 canvas更改顏色變量

Question

試圖沿着這些線做些事情。更改畫布對象的顏色時，$這個CSS是.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

更換這部分

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

與

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

其中$(this) referres當前元素在each()循環作爲jQuery對象，如果元素類屬性包含CSS類，則hasClass()返回true。

不熟悉畫布元素，但我也認爲你應該用ctx.fillStyle = linkColor;替換ctx.fillStyle('linkColor');。

爲什麼在設置顏色（和其他）之前調用ctx.save();，然後在設置顏色（和其他）之後還要ctx.restore();？

UPDATE

創建一個solution at jsFiddle你，享受！ :)