如何使用 javascript 或 jquery 更改画布元素的 fillStyle？答案

【问题标题】：How to change the fillStyle of a canvas element using javascript or jquery?如何使用 javascript 或 jquery 更改画布元素的 fillStyle？
【发布时间】：2012-06-20 02:43:47
【问题描述】：

我有一些html5画布代码来制作图像，当前的填充样式是绿色的，但是当我点击链接时，它应该变成红色，但它不起作用。我该如何解决？谢谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>  
 <head>  
    <script>
        window.onload = function() {


            var canvas = document.getElementById('myCanvas');
            var context  = canvas.getContext('2d');  

            context.fillStyle = "rgb(0,200,0)";  
            context.fillRect (0, 0, 608, 105);  

            var img = new Image();  
            img.src = 'Round Borders.png';  
            context.drawImage(img,0,0);  


            var dataURL = canvas.toDataURL();
            document.getElementById("canvasImg").src = dataURL;


        };

  </script>  

  <script type="text/javascript">
        function change_bg_color(val) {
            document.getElementById('myCanvas').getContext('2d').fillStyle = val;
        }
  </script>

 </head>  
 <body onmousedown="return false;">
   <canvas id="myCanvas" width="608" height="105" style="display:none;"></canvas>  
   <img id="canvasImg" title="Right click to save me!">
   <br/>
   <a href="#" onclick="change_bg_color('rgb(200,0,0)');">change to red</a>
 </body>  
</html>

【问题讨论】：

<canvas> 并不是这样工作的。您必须重新绘制图形。
@sneaky，你改变了填充颜色但没有用它绘制任何东西。

标签： javascript jquery css html canvas

【解决方案1】：

Working Demo

想想fillStyle，就像为真正的画家画布选择颜料一样。你必须先选择你的油漆，然后开始绘画。如果你想改变你的颜色，你必须蘸上你的刷子并重新上色。

所以基本上你需要用新的fillStyle 重新绘制画布上的所有内容，如下所示。

var link = document.getElementsByTagName("a")[0],
    canvas = document.getElementById('myCanvas'),
    context  = canvas.getContext('2d'); 

link.onclick = function(){
    draw('rgb(200,0,0)');
}

function draw(val){
        context.fillStyle = val;
        context.fillRect (0, 0, 608, 105);  
        var img = new Image();  
        img.src = 'Round Borders.png';  
        context.drawImage(img,0,0);  
        var dataURL = canvas.toDataURL();
        document.getElementById("canvasImg").src = dataURL;
}

draw("rgb(0,200,0)");

只需将颜色传递给draw，它将使用所选颜色重新绘制。

【讨论】：