如何在畫圖上重疊畫布圓並設置座標和事件

我試圖在鼠標懸停在城市時在我的丹麥地圖上設置信息。我試圖畫一個圓圈，但它不會顯示在我的地圖上（它出現在下面，沒有結束），我不確定是否可以設置事件。這是我第一次使用畫布。如何在畫圖上重疊畫布圓並設置座標和事件

<!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"> 
     function startCanvas() { 
      var c = document.getElementById("myCanvas"); 
      var ctx = c.getContext("2d"); 

      //draw a circle 
      ctx.beginPath(); 
      ctx.arc(75, 75, 10, 0, Math.PI * 2, true); 
      ctx.closePath(); 
      ctx.fill(); 

      var image = new Image(); 

      image.onload = function() { 
       ctx.drawImage(image, 69, 50); 
      }; 

      image.src = 'denmark.jpg';     
     } 
    </script> 
</head> 
<body onload="startCanvas()"> 
    <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"> 
    function startCanvas() { 
     var c = document.getElementById("myCanvas"); 
     var ctx = c.getContext("2d"); 

     var image = new Image(); 

     image.onload = function() { 
      ctx.drawImage(image, 69, 50); 
      //draw a circle 
      ctx.beginPath(); 
      ctx.arc(75, 75, 10, 0, Math.PI * 2, true); 
      ctx.closePath(); 
      ctx.fill(); 
     }; 

     image.src = 'denmark.jpg';     
    } 
</script> 
</head> 
<body onload="startCanvas()"> 
<canvas id="myCanvas" width="600" height="600";"> 
Your browser does not support the HTML5 canvas tag.</canvas> 
</body> 
</html>

來源

2013-02-14 05:33:58 Tom

感謝那些幫助了很多 – 2013-02-14 06:00:49

正如你所說，它出現在沒有結束。如果您希望繪製圖像，則必須在繪製完圖像之後填充該圓。考慮這些功能對像素數據的作用（替換像素）。您可以在同一事件內繪製圓形，爲圖像加載，只需在drawImage調用後繪製即可。

來源

2013-02-14 03:56:48 DerekR

如何在畫圖上重疊畫布圓並設置座標和事件

回答

相關問題