Jak mogę zmienić kolor elementu canvas html5 za pomocą jquery?

Question

Zasadniczo na mojej stronie znajduje się kilka rysunków wykonanych na płótnie, a co chcę zrobić, gdy aktywowana jest funkcja jquery, rysunki na płótnie zmienią kolor na wybrany przeze mnie. Zakładam, że zawiera jakiś sposób dostępu do context.fillStyle, który definiuje oryginalny kolor, ale nie jestem pewien, jak to zmienić. Ponadto, czy byłoby możliwe, aby zamiast tego w pierwszej kolejności nadać rysunkowi styl css, a następnie zmienić ten styl podczas przetwarzania jquery?

HTML

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

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

skrypt Płótno

<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> 

Dziękujemy

Answer 1

W przypadku, jest jakiegokolwiek użytkowania, oto rozwiązanie skończyło się z:

Najpierw 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> 

stworzyłem zduplikowane elementy canvas, które użyłem CSS, aby ukryć się :

CSS:

#canvasIda, canvasId2a { 
    display:none; 
} 

Potem dokonał następujących zmian do pierwotnego Jquery skryptu:

<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"}); 

    } 

}); 

Jestem pewien, że wiele można wymyślić bardziej efektywne rozwiązania, ale to działało i nie narzekam .

Answer 2

Można to zrobić:

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

Można zobaczyć samouczek płótnie HTML5 (bardzo prosty) here.

Answer 3

Jest to tak proste, jak to:

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