Come posso modificare il colore di un elemento canvas html5 usando jquery?

Question

Fondamentalmente ho diversi disegni su tela sulla mia pagina quello che voglio succedere è quando una funzione jquery è attivata i disegni su tela cambiano al colore della mia scelta. Presumo che implichi un modo di accedere a context.fillStyle che definisce il colore originale, ma non sono sicuro di come modificarlo. Inoltre, sarebbe possibile dare la tela disegnando uno stile css in prima istanza e poi cambiare lo stile quando viene elaborato il jquery?

HTML

<canvas class="canvaslink" id="canvasId" width="50" height="50"></canvas> 

<canvas class="canvaslink" id="canvasId2" width="50" height="50"></canvas> 

sceneggiatura Tela

<script> 
function drawSomething(canvas) { 
var context = canvas.getContext("2d"); 

var width = 125; // Triangle Width 
var height = 45; // Triangle Height 
var padding = 5; 

// Draw a path 
context.beginPath(); 
context.moveTo(padding + width-125, height + padding);  // Top Corner 
context.lineTo(padding + width-90,height-17 + padding); // point 
context.lineTo(padding, height-35 + padding);   // Bottom Left 
context.closePath(); 

// Fill the path 
context.fillStyle = "#9ea7b8"; 
context.fill(); 


} 

drawSomething(document.getElementById("canvasId")); 
drawSomething(document.getElementById("canvasId2")); 

</script> 

Jquery Script

<script> 
var counter = $('#counter div strong'); 

var counterH2 = $('h2 strong'); 

$('#box').click(function(){ 
    $("#counter").css("display", "block"); 
    var counterValue = counter.text(); 
    counterValue = ++counterValue; 
    counter.text(counterValue); 
    counterH2.text(counterValue); 
    if (counterValue == 3){ 
     alert("Thanks for visiting!"); 
     $('body').css({"background-color":"#9ea7b8"}); 
     $('body').css({"color":"#11112c"}); 

     **//I'd like to change the canvas colour here!** 

    } 

}); 
</script> 

Molte grazie

Answer 1

In caso si tratta di qualche utilità, ecco la soluzione ho finito con:

Prima il codice HTML:

<canvas class="canvaslink" id="canvasId" width="50" height="50"></canvas> 
<canvas class="canvaslink" id="canvasIda" width="50" height="50"></canvas> 

<canvas class="canvaslink" id="canvasId2" width="50" height="50"></canvas> 
<canvas class="canvaslink" id="canvasId2a" width="50" height="50"></canvas> 

ho creato elementi canvas duplicati che ho usato i CSS per nascondere con :

CSS:

#canvasIda, canvasId2a { 
    display:none; 
} 

poi ho fatto le seguenti modifiche all'originale sceneggiatura Jquery:

<script> 
var counter = $('#counter div strong'); 

var counterH2 = $('h2 strong'); 

$('#box').click(function(){ 
    $("#counter").css("display", "block"); 
    var counterValue = counter.text(); 
    counterValue = ++counterValue; 
    counter.text(counterValue); 
    counterH2.text(counterValue); 
    if (counterValue == 3){ 

     $('body').css({"background-color":"#9ea7b8"}); 
     $('body').css({"color":"#11112c"}); 
     $('a').css({"color":"#11112c"}); 

    //remove the previous canvas elements 

     element = document.getElementById("canvasId"); 
     element2 = document.getElementById("canvasId2"); 

     element.parentNode.removeChild(element); 
     element2.parentNode.removeChild(element2); 

    //function to draw new canvas elements with new desired colour 

     function drawSomething2(canvas) { 
      var context = canvas.getContext("2d"); 

      var width = 125; // Triangle Width 
      var height = 45; // Triangle Height 
      var padding = 5; 

    // Draw a path 

      context.beginPath(); 
      context.moveTo(padding + width-125, height + padding);  // Top Corner 
      context.lineTo(padding + width-90,height-17 + padding); // point 
      context.lineTo(padding, height-35 + padding);   // Bottom Left 
      context.closePath(); 

    // Fill the path 
      context.fillStyle = "#11112c"; 
      context.fill(); 


     } 
    //draw the canvas elements 

     drawSomething2(document.getElementById("canvasIda")); 
     drawSomething2(document.getElementById("canvasId2a")); 

    //display the previously hidden elements containing the new canvas drawings 

     $('#canvasIda').css({"display":"block"}); 
     $('#canvasId2a').css({"display":"block"}); 

    } 

}); 

Sono sicuro che molti possono trovare una soluzione più efficiente, ma questo ha funzionato e non mi lamento .

Answer 2

Si può fare:

var context = canvas.getContext('2d'); 
context.fillStyle = "#000000"; 
context.fill(); 
// Other properties ... 

Si può vedere una tela tutorial di HTML5 (molto semplice) here.

Answer 3

E 'semplice come questo:

document.getElementById("ID").style.background = 'color';