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文件

<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

鼠標座標是顯示像素。要將其轉換爲畫布座標，您需要相應地縮放它們。

這樣做的一種方式是：

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縮放後畫布上的鼠標座標

回答

相關問題