我的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無法正常工作

回答

相關問題