如何使用javascript或jquery更改canvas元素的fillStyle？

Question

我有一些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>

Answer 1

工作演示

想想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 ，它将使用所选颜色重新绘制。

如何使用javascript或jquery更改canvas元素的fillStyle？

问题描述

1 个解决方案

解决方案1
3 已采纳 2012-06-19 18:37:25

工作演示

如何使用javascript或jquery更改canvas元素的fillStyle？

问题描述

1 个解决方案

解决方案1 3 已采纳 2012-06-19 18:37:25

工作演示

解决方案1
3 已采纳 2012-06-19 18:37:25