我的EventListener无法正常工作

我想要做的是，如果我将鼠标悬停在某个绘制的对象上，我想显示一个blurb，说明它是哪个城市，人口和市中心的图像等现在我只是想让你的工作。我也想知道是否有别的东西我可以为您而不是警报，这东西会让一个泡沫代替我的EventListener无法正常工作

<script> 
    function startCanvas() { 
     var c = document.getElementById("myCanvas"); 
     var ctx = c.getContext("2d"); 
     //first circle 
     var one = c.getContext("2d"); 
     //second circle 
     var two = c.getContext("2d"); 
     //third cirle 
     var three = c.getContext("2d"); 
     //fourth circle 
     var four = c.getContext("2d"); 
     //fifth cirle 
     var five = c.getContext("2d"); 
     // new image 
     var image = new Image(); 
     image.onload = function() { 
     ctx.drawImage(image, 69, 50); 
     //draw a circle 
     one.beginPath(); 
     one.arc(180, 90, 10, 0, Math.PI * 2, true); 
     one.closePath(); 
     one.fill(); 
     two.beginPath(); 
     two.arc(155, 138, 10, 0, Math.PI * 2, true); 
     two.closePath(); 
     two.fill(); 
     three.beginPath(); 
     three.arc(160, 180, 10, 0, Math.PI * 2, true); 
     three.closePath(); 
     three.fill(); 
     four.beginPath(); 
     four.arc(257, 210, 10, 0, Math.PI * 2, true); 
     four.closePath(); 
     four.fill(); 
     five.beginPath(); 
     five.arc(238, 235, 10, 0, Math.PI * 2, true); 
     five.closePath(); 
     five.fill(); 
     }; 
     image.src = 'denmark.jpg'; 



    //function hover over circle one, give alert 
     one.addEventListener('mouseover', 
     function (e) { 
      e = e || window.event; 
      alert('this is a test'); 
     } 
     ); 


    } 
    </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

您的代码将抛出此错误

对象＃< CanvasRenderingContext2D>有没有方法 '的addEventListener'

因此，通过这个代码

修改这部分

//function hover over circle one, give alert 
    one.addEventListener('mouseover', 
    function (e) { 
     e = e || window.event; 
     alert('this is a test'); 
    } 
    );

//function hover over circle one, give alert 
    c.addEventListener('mouseover', 
    function (e) { 
     e = e || window.event; 
     alert('this is a test'); 
    } 
    ,false);

这将工作;

来源

2013-02-14 17:12:41

你有没有考虑使用稍微更高级别的绘图库，如RaphaelJS？或EaselJS？

我已经搞砸了这两个，他们使这种交互式画布工作更加优雅，并且还将提高您的跨浏览器兼容性。

来源

2013-02-14 14:59:00

我的EventListener无法正常工作

回答

相关问题