0

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

1 回答 1

3

工作演示

想像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它，它就会用选择的颜色重新绘制。

​</p>

于 2012-06-19T18:37:25.297 回答