2016-11-22 17 views
0

HTML5ページのキャンバス要素上にマウスの座標を配置しようとしています。CSSスケール後のキャンバス上のマウス座標

キャンバスを特定の高さと幅(たとえば、700x700)に作成します。私がキャンバスの上にマウスを置くと、マウスのX、Yを知りたい。これは私がHTMLファイルにCSSを使用して、私のキャンバスを伸ばすまで、正常に動作します...ここで

は私のjavascriptファイルです: 機能スプライト(パス) { this.img =新しいイメージ(); this.img.onload = loaded; this.img.src = path;

function loaded() 
    { 
     console.log("Loaded picture"); 
    } 
} 

function drawSprite(sprite, ctx) 
{ 
    console.log("drawing picture"); 
    ctx.drawImage(sprite.img,10,10); 
} 

//------------------------------------------ 

function Game() 
{ 
    this.canvas = document.createElement("canvas"); 
    document.body.appendChild(this.canvas); 
    this.canvas.width = 700; 
    this.canvas.height = 700; 
    this.context = this.canvas.getContext("2d");  

    var ctx = this.context; 

    ctx.canvas.addEventListener('mousemove', function(event){ 
     var mouseX = event.clientX - ctx.canvas.offsetLeft; 
     var mouseY = event.clientY - ctx.canvas.offsetTop; 
     var status = document.getElementById("coords"); 
     status.innerHTML = mouseX+" | "+mouseY; 

    }); 


    this.objects = new Array(); 
    this.objects.push(new Sprite("dog.png")); 
} 

function drawGame(g) 
{ 
    console.log("I'm here"); 
    for(var i=0;i<g.objects.length;i++) 
    { 
     drawSprite(g.objects[i], g.context); 
    } 
} 

function drawLine(g) 
{ 
    g.context.moveTo(0,0); 
    g.context.lineTo(100,100); 
    g.context.stroke(); 
} 

//------------------ 

window.addEventListener('load',function(event){startgame();}); 
var globalGame; 

function startgame() 
{ 
    globalGame = new Game(); 
    drawGame(globalGame); 
    drawLine(globalGame); 
} 

はここ

<html> 
    <head> 
     <script src="functions.js"></script> 
     <style> 
      canvas 
      { 
       width:90%; 
       height:90%; 
      } 
     </style> 
    </head> 
    <body> 

    <h1 id="coords">0 | 0</h1> 
    </body> 
<html> 
+0

の可能性のある重複した[変身HTML5キャンバス上のマウスの位置を取得する方法] (http://stackoverflow.com/questions/40600192/how-to-get-mouse-position-on-transformed-html5-canvas) – Kaiido

答えて

1

マウスの座標が表示画素である私のHTMLファイルです。キャンバス座標に変換するには、それに応じてキャンバス座標を調整する必要があります。

これを行う1つの方法は次のとおりです。

var canvasX = mouseX * canvas.width/canvas.clientWidth; 
var canvasY = mouseY * canvas.height/canvas.clientHeight; 

この例のように:

var canvas = document.createElement("canvas"); 
 
    document.body.appendChild(canvas); 
 
    canvas.width = 700; 
 
    canvas.height = 700; 
 
var ctx = canvas.getContext("2d");  
 

 
ctx.canvas.addEventListener('mousemove', function(event){ 
 
    var mouseX = event.clientX - ctx.canvas.offsetLeft; 
 
    var mouseY = event.clientY - ctx.canvas.offsetTop; 
 
    var status = document.getElementById("coords"); 
 

 
    // scale mouse coordinates to canvas coordinates 
 
    var canvasX = mouseX * canvas.width/canvas.clientWidth; 
 
    var canvasY = mouseY * canvas.height/canvas.clientHeight; 
 

 
    status.innerHTML = mouseX+" | "+mouseY+"<br>"+canvasX+" | "+canvasY; 
 
});
canvas { 
 
    width:250px; 
 
    height:250px; 
 
    background-color:#f0f; 
 
}
<div id="coords">??? | ???<br>??? | ???</div>

+0

ありがとう!それは魅力のように働いた! – Matthew

関連する問題