所以，我有一个画布，我有一堆函数，但我试图让它在上面的标签中显示鼠标在画布上的x和y位置。但是，当我将鼠标移动时，鼠标在画布上的x和y位置与标签上显示的x和y位置不匹配，我无法弄清楚原因。你能帮忙吗？我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas Library</title>
</head>
<body>
<p id="text">Unknown</p>
<canvas width="400" height="400" id="canvas"></canvas>
<script>
var Canvas = document.getElementById("canvas");
var label = document.getElementById("text");
//Declare the Canvas Object
var canvas = function(src) {
//The Canvas to draw on
this.src = src;
//The context of source(used for drawing)
this.ctx = this.src.getContext("2d");
//The Mouse Move Function
this.showCoordinates = function(e) {
console.log(e);
label.innerHTML = "<b>x: </b>" + e.layerX + " <b>y: </b>" + e.layerY;
}
//Show coordinates variable
this.showCoordinatesBool = true;
//The boolean to tell if we should use stroke
var useStroke = true;
//The fill style and stroke style(can be color, pattern, or gradient)
this.fillStyle = "#000000";
this.strokeStyle = "#000000";
//The Line cap style (can be butt, square, or round)
this.lineCap = "butt";
//The Stroke Weight (how wide the strokes are)
this.strokeWeightVar = "default";
//The corner style (how the corners are drawn)
this.cornerStyle = "miter";
//Function to set the fill style
this.fill = function(style) {
this.fillStyle = style;
this.ctx.fillStyle = style;
}
//Function to set the stroke style
this.stroke = function(style) {
this.useStroke = true;
this.strokeStyle = style;
this.ctx.strokeStyle = style;
}
//Function to delete the stroke
this.noStroke = function() {
this.useStroke = false;
}
//Function to draw a rectangle
this.rect = function(x, y, width, height) {
this.ctx.fillRect(x, y, width, height);
if(this.useStroke) {
this.ctx.strokeRect(x, y, width, height);
}
}
//Function to draw a corner
this.corner = function(style, startX, startY, x1, y1, x2, y2) {
this.ctx.lineJoin = style;
this.cornerStyle = style;
this.ctx.beginPath();
this.ctx.moveTo(startX, startY);
this.ctx.lineTo(x1, y1);
this.ctx.lineTo(x2, y2);
this.ctx.stroke();
}
//Function to draw a hollow rectangle
this.hollowRect = function(x, y, width, height) {
this.ctx.strokeRect(x, y, width, height);
}
//Function to set the canvas background
this.background = function(style) {
this.fillStyle = style;
this.ctx.fillStyle = style;
this.ctx.fillRect(0, 0, this.src.width, this.src.height);
}
//Function to draw a line
this.line = function(startX, startY, endX, endY) {
this.ctx.beginPath();
this.ctx.moveTo(startX, startY);
this.ctx.lineTo(endX, endY);
this.ctx.stroke();
}
//Function to change line style
this.lineCap = function(mode) {
this.ctx.lineCap = mode;
this.lineCap = mode;
}
//Function to change stroke weight
this.strokeWeight = function(weight) {
this.ctx.lineWidth = weight;
this.strokeWeightVar = weight;
}
//Function to clear a certain area
this.clearArea = function(x, y, width, height) {
this.ctx.clearRect(x, y, width, height);
}
//Turn the show coordinate function on
this.enableCoordinates = function() {
this.showCoordinatesBool = true;
this.src.addEventListener("mousemove", this.showCoordinates);
}
}
//Create a new canvas
var myCanvas = new canvas(Canvas);
//Set the Background Color
myCanvas.background("#ff0000");
//Set the fill color
myCanvas.fill("#0000ff");
//Set the Stroke Color
myCanvas.stroke("#00ff00");
//Draw a rectangle
myCanvas.rect(164, 153, 50, 100);
//Draw a hollow rectangle
myCanvas.hollowRect(300, 300, 50, 50);
//Disable the Stroke
myCanvas.noStroke();
//Draw a rectangle with no stroke
myCanvas.rect(21, 18, 50, 50);
//Change the Stroke color
myCanvas.stroke("#ffff00");
//Change the stroke weight
myCanvas.strokeWeight(10);
//Change the line cap
myCanvas.lineCap("round");
//Draw a line
myCanvas.line(350, 30, 250, 80);
//Draw a corner
myCanvas.corner("miter", 50, 135, 100, 185, 100, 110)
//Enable the Coordinates
myCanvas.enableCoordinates();
//Clear a space from the canvas
myCanvas.clearArea(6, 245, 100, 100);
</script>
</body>
</html>
答案 0 :(得分：0)
使用MouseEvent的offsetX和offsetY属性，您可以获得相对于画布的正确鼠标坐标。
...
this.showCoordinates = function(e) {
label.innerHTML = "<b>x: </b>" + e.offsetX + " <b>y: </b>" + e.offsetY;
}
...
var Canvas = document.getElementById("canvas");
var label = document.getElementById("text");
//Declare the Canvas Object
var canvas = function(src) {
//The Canvas to draw on
this.src = src;
//The context of source(used for drawing)
this.ctx = this.src.getContext("2d");
//The Mouse Move Function
this.showCoordinates = function(e) {
//console.log(e);
label.innerHTML = "<b>x: </b>" + e.offsetX + " <b>y: </b>" + e.offsetY;
}
//Show coordinates variable
this.showCoordinatesBool = true;
//The boolean to tell if we should use stroke
var useStroke = true;
//The fill style and stroke style(can be color, pattern, or gradient)
this.fillStyle = "#000000";
this.strokeStyle = "#000000";
//The Line cap style (can be butt, square, or round)
this.lineCap = "butt";
//The Stroke Weight (how wide the strokes are)
this.strokeWeightVar = "default";
//The corner style (how the corners are drawn)
this.cornerStyle = "miter";
//Function to set the fill style
this.fill = function(style) {
this.fillStyle = style;
this.ctx.fillStyle = style;
}
//Function to set the stroke style
this.stroke = function(style) {
this.useStroke = true;
this.strokeStyle = style;
this.ctx.strokeStyle = style;
}
//Function to delete the stroke
this.noStroke = function() {
this.useStroke = false;
}
//Function to draw a rectangle
this.rect = function(x, y, width, height) {
this.ctx.fillRect(x, y, width, height);
if (this.useStroke) {
this.ctx.strokeRect(x, y, width, height);
}
}
//Function to draw a corner
this.corner = function(style, startX, startY, x1, y1, x2, y2) {
this.ctx.lineJoin = style;
this.cornerStyle = style;
this.ctx.beginPath();
this.ctx.moveTo(startX, startY);
this.ctx.lineTo(x1, y1);
this.ctx.lineTo(x2, y2);
this.ctx.stroke();
}
//Function to draw a hollow rectangle
this.hollowRect = function(x, y, width, height) {
this.ctx.strokeRect(x, y, width, height);
}
//Function to set the canvas background
this.background = function(style) {
this.fillStyle = style;
this.ctx.fillStyle = style;
this.ctx.fillRect(0, 0, this.src.width, this.src.height);
}
//Function to draw a line
this.line = function(startX, startY, endX, endY) {
this.ctx.beginPath();
this.ctx.moveTo(startX, startY);
this.ctx.lineTo(endX, endY);
this.ctx.stroke();
}
//Function to change line style
this.lineCap = function(mode) {
this.ctx.lineCap = mode;
this.lineCap = mode;
}
//Function to change stroke weight
this.strokeWeight = function(weight) {
this.ctx.lineWidth = weight;
this.strokeWeightVar = weight;
}
//Function to clear a certain area
this.clearArea = function(x, y, width, height) {
this.ctx.clearRect(x, y, width, height);
}
//Turn the show coordinate function on
this.enableCoordinates = function() {
this.showCoordinatesBool = true;
this.src.addEventListener("mousemove", this.showCoordinates);
}
}
//Create a new canvas
var myCanvas = new canvas(Canvas);
//Set the Background Color
myCanvas.background("#ff0000");
//Set the fill color
myCanvas.fill("#0000ff");
//Set the Stroke Color
myCanvas.stroke("#00ff00");
//Draw a rectangle
myCanvas.rect(164, 153, 50, 100);
//Draw a hollow rectangle
myCanvas.hollowRect(300, 300, 50, 50);
//Disable the Stroke
myCanvas.noStroke();
//Draw a rectangle with no stroke
myCanvas.rect(21, 18, 50, 50);
//Change the Stroke color
myCanvas.stroke("#ffff00");
//Change the stroke weight
myCanvas.strokeWeight(10);
//Change the line cap
myCanvas.lineCap("round");
//Draw a line
myCanvas.line(350, 30, 250, 80);
//Draw a corner
myCanvas.corner("miter", 50, 135, 100, 185, 100, 110)
//Enable the Coordinates
myCanvas.enableCoordinates();
//Clear a space from the canvas
myCanvas.clearArea(6, 245, 100, 100);<p id="text">Unknown</p>
<canvas width="400" height="400" id="canvas"></canvas>