如何在画图上重叠画布圆并设置坐标和事件

我试图在鼠标悬停在城市时在我的丹麦地图上设置信息。我试图画一个圆圈，但它不会显示在我的地图上（它出现在下面，没有结束），我不确定是否可以设置事件。这是我第一次使用画布。如何在画图上重叠画布圆并设置坐标和事件

<!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

如何在画图上重叠画布圆并设置坐标和事件

回答

相关问题