В основном у меня есть несколько рисунков на холсте на моей странице, и я хочу, чтобы при активации функции 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>
Большое спасибо