0

コードのリンク 1.次のコードは、html5 キャンバスに円を描画し、マウス クリックを取得するためのイベント リスナーを追加します。円の内側のマウス クリックは、円の外側のクリックと区別できません。

     <body>
     <canvas id="canvas" onclick="handleEvent()"></canvas>
     </body>

      body{
      background: #3e3e3e;
       }
      #canvas{
     background:white;
     height: 400px;
     width: 400px;
     border: 2px solid yellow;
       }


      window.onload=function(){
      var canvas=document.getElementById('canvas');
      var ctx=canvas.getContext('2d');

      var cx=canvas.width/2;
      var cy=canvas.height/2;
      var r=20;
       //circle draw function
      ctx.beginPath();
      ctx.arc(cx,cy,r,0,2*Math.PI,false);
      ctx.stroke();
       }

      //function to get mouse click coordinates
      function handleEvent(e)
      {
        var evt = e ? e:window.event;
        var clickX=0, clickY=0;
       if (evt.pageX || evt.pageY)
       {
         clickX = evt.pageX;
         clickY = evt.pageY;
        }
       if(180<evt.pageX<220)
        {
         alert("you are inside the circle");
        }

       alert (evt.type.toUpperCase() + ' mouse event:'
       +'\n pageX = ' + clickX
       +'\n pageY = ' + clickY 
        )
       return false;

       }
4

1 に答える 1

1

既存のコードに関するいくつかの落とし穴:

「円」が垂直に引き伸ばされていることに注意してください。これは、キャンバスのデフォルト サイズが幅 300 ピクセル、高さ 150 ピクセルであるためです。CSS を使用してサイズを 400x400 にすると、キャンバスが不均衡に伸びます。これを回避するには、CSS ではなく canvas タグまたは JavaScript でキャンバス サイズを設定します。

// in html 
<canvas id="canvas" width="400px" height="400px"></canvas>

// in javascript (do this before any drawing)
var canvas=document.getElementById(“canvas”);
canvas.width=400;
canvas.height=400;

キャンバス座標 (ウィンドウ座標ではなく) で生成された円のヒット テストを行っているため、マウス クリックの位置もキャンバス座標で取得する必要があります。これは 2 ステップのプロセスです。

まず、ウィンドウに対するキャンバスの位置を取得します

var canvas=document.getElementById("canvas");
var offsetX=canvas.offsetLeft;
var offsetY=canvas.offsetTop;

次に、マウスクリックを処理するときに、次のようにキャンバスに相対的なマウス位置を取得できます。

var evt = e ? e:window.event;
clickX = evt.clientX-offsetX;
clickY = evt.clientY-offsetY;

これは、ヒットテストのより良いバージョンです。これは、ピタゴラスの定理を使用して、マウスクリックが円の半径内にあるかどうかを確認します。

var dx=cx-clickX;
var dy=cy-clickY;

if( dx*dx+dy*dy <= r*r )
{
  alert("you are inside the circle");
}

(オプション) JavaScript を使用してキャンバス内のクリック イベントをリッスンする方法は次のとおりです。

canvas.addEventListener("click",handleEvent);

(オプション) ブラウザ間の違いを処理する堅牢で優れたライブラリである jQuery を調べると、これを行う必要がなくなります。

var evt = e ? e:window.event;

ここにコードとフィドルがあります： http://jsfiddle.net/m1erickson/zLzwU/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{
      background: #3e3e3e;
    }
    #canvas{
      background:white;
      border: 2px solid yellow;
    }    
</style>

<script>
window.onload=function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var offsetX=canvas.offsetLeft;
    var offsetY=canvas.offsetTop;

    var cx=canvas.width/2;
    var cy=canvas.height/2;
    var r=20;

    ctx.beginPath();
    ctx.arc(cx,cy,r,0,2*Math.PI,false);
    ctx.closePath();
    ctx.stroke();

    function handleEvent(e){

        var evt = e ? e:window.event;
        clickX = evt.clientX-offsetX;
        clickY = evt.clientY-offsetY;

        var dx=cx-clickX;
        var dy=cy-clickY;

        if( dx*dx+dy*dy <= r*r )
        {
          alert("you are inside the circle");
        }

        return false;
    }

    canvas.addEventListener("click",handleEvent);


}; // end init;
</script>

</head>

<body>
    <canvas id="canvas" width="400px" height="400px"></canvas>
</body>
</html>
于 2013-04-28T15:54:12.480 に答える