Как изменить цвет элемента холста html5 с помощью jquery?

В основном у меня есть несколько рисунков на холсте на моей странице, и я хочу, чтобы при активации функции jquery рисунки на холсте менялись на цвет по моему выбору. Я предполагаю, что это связано с каким-то способом доступа к context.fillStyle, который определяет исходный цвет, но я не уверен, как его изменить. Кроме того, можно ли вместо этого придать рисунку холста стиль css в первом случае, а затем изменить этот стиль при обработке jquery?

HTML

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

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

Canvas script

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

Большое спасибо

5
задан Ollie Jones 4 June 2012 в 14:18
поделиться