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 に答える