HTML Canvas X和Y值:如何获取它们?

时间:2017-07-14 14:11:24

标签: html5 html5-canvas

所以,我有一个画布,我有一堆函数,但我试图让它在上面的标签中显示鼠标在画布上的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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

使用MouseEvent的offsetXoffsetY属性,您可以获得相对于画布的正确鼠标坐标。

...
this.showCoordinates = function(e) {
   label.innerHTML = "<b>x: </b>" + e.offsetX + " <b>y: </b>" + e.offsetY;
}
...

&#13;
&#13;
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);
&#13;
<p id="text">Unknown</p>
<canvas width="400" height="400" id="canvas"></canvas>
&#13;
&#13;
&#13;