我如何將我的drawImage與我的fillRect重疊

我試圖在鼠標懸停在城市時在我的丹麥地圖上設置信息。我試圖弄清楚如何在我的drawimage上設置我的fillRect，因爲它在它後面，以及如何將鼠標懸停在它上面後設置事件。我如何將我的drawImage與我的fillRect重疊

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

     <html xmlns="http://www.w3.org/1999/xhtml"> 
     <head> 
      <title></title> 

       <script type="text/javascript"> 
         // add map to div    
         function startCanvas() { 
         var c = document.getElementById("myCanvas"); //get element by id 
         var ctx = c.getContext("2d"); 



         //add new image to canavas 
         var image = new Image(); 

         image.onload = function() { 

          // draw image 
          ctx.drawImage(image, 69, 50); 

         }; 

         // the image file, want this image to be set to back 
         image.src = 'denmark.jpg'; 



          // draw rectangle, want this to be st to front 
         ctx.fillStyle = "#FF0000"; 
         ctx.fillRect(0, 0, 150, 75); 


        } 





      </script> 

     </head> 
     <body onload="startCanvas()"> 

    //canvas 
     <canvas id="myCanvas" width="600" height="600";"> 
     Your browser does not support the HTML5 canvas tag.</canvas> 


     </body> 
     </html>

來源

2013-02-14 Devendra Danny Ramdayal

如果您希望它位於前面，您需要在圖像後面繪製矩形。試試這個：

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title></title> 

      <script type="text/javascript"> 
        // add map to div    
        function startCanvas() { 
        var c = document.getElementById("myCanvas"); //get element by id 
        var ctx = c.getContext("2d"); 



        //add new image to canavas 
        var image = new Image(); 

        image.onload = function() { 

         // draw image 
         ctx.drawImage(image, 69, 50); 
         // draw rectangle, want this to be st to front 
         ctx.fillStyle = "#FF0000"; 
         ctx.fillRect(0, 0, 150, 75); 

        }; 

        // the image file, want this image to be set to back 
        image.src = 'denmark.jpg'; 





       } 





     </script> 

    </head> 
    <body onload="startCanvas()"> 

//canvas 
    <canvas id="myCanvas" width="600" height="600";"> 
    Your browser does not support the HTML5 canvas tag.</canvas> 


    </body> 
    </html>

來源

2013-02-14 05:30:34 Tom

感謝這幫助了很多，但我不知道我可以添加行爲爲矩形 – 2013-02-14 06:01:57

你應該有一個遊戲循環計時器和清除畫布每一幀，然後每次重繪矩形別處。 – Tom 2013-02-14 06:25:56

我如何將我的drawImage與我的fillRect重疊

回答

相關問題