如何使用 jquery 更改 html5 画布元素的颜色？答案

【问题标题】：How can I alter the colour of a html5 canvas element using jquery?如何使用 jquery 更改 html5 画布元素的颜色？
【发布时间】：2023-03-16 09:36:01
【问题描述】：

基本上，我的页面上有几个画布绘图我想要发生的是当激活 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>

画布脚本

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

非常感谢

【问题讨论】：

标签： javascript jquery html html5-canvas

【解决方案1】：

就这么简单：

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

【讨论】：

【解决方案2】：

你可以这样做：

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

可以看HTML5画布教程（很简单）here。

【讨论】：

您好，谢谢，但我想您可能对这个问题感到困惑。我已经设置了用户与某物交互后问题正在改变它的颜色。因此在 jquery 代码中：//我想在这里更改画布颜色！
对不起，你可以去这里：stackoverflow.com/questions/9688173/…。它与背景图像有关，但与背景颜色相同。顺便说一句，你也可以看看这个链接：mikechambers.com/blog/2011/01/31/….

【解决方案3】：

如果这有任何用处，这是我最终得到的解决方案：

首先是 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>

我创建了重复的画布元素，我使用 CSS 来隐藏它们：

CSS：

#canvasIda, canvasId2a {
    display:none;
}

然后我对原来的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"});

     }

});

我相信很多人都能想出一个更有效的解决方案，但这很有效，我没有抱怨。

【讨论】：