HTML 5キャンバス内のマウスの位置

HTML 5のキャンバスを理解するための簡単な描画アプリケーションを作成しています。問題は、キャンバス要素内にマウスの位置が正しくないように見えないことです。私は、この問題に対処するgetting mouse position with javascript within canvasのようなstackoverflowの他の質問を見ましたが、その解決策は私を助けてくれないようです。ここでHTML 5キャンバス内のマウスの位置

は私のコードです：私はここで間違って

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
     <title>Untitled Document</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
     <style type="text/css"> 
      #test { 
       border: solid black 1px; 
       width: 500px; 
       height: 500px; 
      } 
     </style> 
     <script type="text/javascript"> 
      $(function(){ 
       var canvas=document.getElementById('test'); 
       if(canvas.getContext){ 
        var ctx =canvas.getContext('2d');  
        var draw = false; 
        ctx.strokeStyle = "rgb(200,0,0)"; 
        ctx.lineWidth = 3; 
        ctx.lineCap = "round"; 

        $('#test').mousedown(function(){draw=true;}); 
        $('#test').mouseup(function(){draw=false;}); 
        $('#test').mousemove(function(e){ 
         if(draw){ 
          var x , y; 
          x = e.layerX; 
          y = e.layerY; 
          ctx.moveTo(x,y); 
          ctx.lineTo(x+1,y+1); 
          ctx.stroke(); 
              } 
            }); 
       } 
      }); 
     </script> 
    </head> 
    <body> 
     <canvas id="test"></canvas> 
    </body> 
</html>

何をしているのですか？私はChrome/Firefoxの両方でこれをテストしました。

出典

2011-02-06 kartikq

キャンバスに幅と高さのプロパティがありません。現在のソリューションでは、デフォルトに合わせてCSSに合わせるだけです。これはあなたのマウスコードを破壊します。何かを試してみてください

<canvas id="test" width=500 height=500></canvas>

キャンバスのマークアップとして。

出典

2011-02-06 18:58:39

おかげで働いていたキャンバス上のあなたのマウスの動きを更新すると宣言されたと仮定！ CSSの幅と高さがキャンバスの座標系を定義していないようです。私は仕様をもっと慎重に読んでいたはずです。 – kartikq

あなたのcanvas要素にピクセルdimenstionを追加する必要があります。ここでは

<canvas id="test" width='500px' height='500px' ></canvas>

は実施例である - http://jsfiddle.net/gorsky/GhyPr/。

出典

2011-02-06 19:15:28 gor

ありがとうございました！私はCSSの幅/高さがキャンバス要素の座標系も定義していると仮定して間違いました。 – kartikq

キャンバスがすでに...

var Mouse = { //make a globally available object with x,y attributes 
    x: 0, 
    y: 0 
} 
canvas.onmousemove = function (event) { // this object refers to canvas object 
    Mouse = { 
     x: event.pageX - this.offsetLeft, 
     y: event.pageY - this.offsetTop 
    } 
}

マウスは、そのbebraw

出典

2011-02-06 21:46:28 canvastag

HTML 5キャンバス内のマウスの位置

答えて

関連する問題