CSSスケール後のキャンバス上のマウス座標

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>

出典

2016-11-22 Matthew

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

マウスの座標が表示画素である私の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>

出典

2016-11-22 23:40:23 Ouroborus

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

CSSスケール後のキャンバス上のマウス座標

答えて

関連する問題