1

当我将鼠标悬停在一个城市上时，我正试图在我的丹麦地图上设置信息。我试图弄清楚如何在我的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>
4

1 回答 1

0

如果您希望它位于前面，则需要在图像之后绘制矩形。试试这个： 

    <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-14T05:30:34.697 回答