javascript - 如何获取 Canvas 上图像的坐标？

Question

function writeMessage(canvas, message) {
		var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.font = '12pt Calibri';
    context.fillStyle = 'black';
    context.fillText(message, 10, 25);
}

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
}

function make_base() {
  base_image = new Image();
  base_image.src = 'https://www.w3schools.com/css/img_fjords.jpg';
  base_image.onload = function() {
    context.drawImage(base_image, 0, 0);
  }
}

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
make_base();

canvas.addEventListener('mousemove', function(evt) {
    var mousePos = getMousePos(canvas, evt);
    var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
    writeMessage(canvas, message);
}, false);

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;">
</canvas>

我可以在 Canvas 上添加图像，并且当鼠标悬停在 Canvas 上时也可以获取 Canvas 的坐标。

但是当我将鼠标悬停在照片上时，图像会消失。

Answer 1

问题是，您每次在绘制文本(消息)之前都会清除整个 Canvas ，这也会清除图像。

要解决此问题，您需要在清除 Canvas 后、绘制文本之前重新绘制图像...

function writeMessage(canvas, message) {
   var context = canvas.getContext('2d');
   context.clearRect(0, 0, canvas.width, canvas.height);
   context.drawImage(base_image, 0, 0); //<-- draw image
   context.font = '12pt Calibri';
   context.fillStyle = 'red';
   context.fillText(message, 10, 25);
}

function getMousePos(canvas, evt) {
   var rect = canvas.getBoundingClientRect();
   return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
   };
}

function make_base() {
   base_image = new Image();
   base_image.src = 'https://www.w3schools.com/css/img_fjords.jpg';
   base_image.onload = function() {
      context.drawImage(base_image, 0, 0);
   }
}

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
make_base();

canvas.addEventListener('mousemove', function(evt) {
   var mousePos = getMousePos(canvas, evt);
   var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
   writeMessage(canvas, message);
}, false);

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas>