0

私がやろうとしているのは、描いたオブジェクトの1つにカーソルを合わせると、それがどの都市であるか、人口、ダウンタウンの画像などを示す宣伝文句を表示したいということです。それが機能します。また、アラートの代わりに何か他にできること、代わりにバブルを作る何かがあるかどうか疑問に思います

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

2 に答える 2

0

RaphaelJSなどの少し高レベルの描画ライブラリの使用を検討しましたか？またはEaselJS？

私はこれらの両方をいじりました、そしてそれらはこの種のインタラクティブなキャンバスをはるかにエレガントに動作させ、そしてあなたのクロスブラウザの互換性も改善します。

于 2013-02-14T14:59:00.887 に答える
0

あなたのコードはこのエラーをスローします

  • オブジェクト＃<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-14T17:12:41.963 に答える