CSS缩放后，画布上的鼠标坐标 [英] Mouse Coordinates on Canvas after CSS scale
问题描述
我试图在HTML5页面的canvas元素上找到鼠标的坐标。
I am attempting to locate the coordinates of the mouse on a canvas element of an HTML5 page.
我创建了一个特定高度和宽度的画布，例如700x700。当我将鼠标悬停在画布上时，我希望能够知道鼠标的X，Y。这很好用，直到我在HTML文件中使用CSS拉伸我的画布...
I create the canvas to be a certain height and width, for example 700x700. When I mouse over the canvas, I want to be able to know the X,Y of the mouse. This works fine, until I stretch my canvas using CSS in the HTML file...
这是我的javascript文件：
function Sprite（path）
{
this.img = new Image（）;
this.img.onload = loaded;
this.img.src = path;
Here is my javascript file: function Sprite(path) { this.img = new Image(); 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>
推荐答案
鼠标坐标以显示像素为单位。要将其转换为画布坐标，您需要相应地缩放它们。
The mouse coordinates are in display pixels. To convert that to canvas coordinates, you'll need to scale them accordingly.
这样做的一种方法是：
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>
这篇关于CSS缩放后，画布上的鼠标坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
