javascript - Canvas 中的鼠标坐标不起作用

Question

var canvas=document.getElementById('canvas');
var ctx=canvas.getContext("2d");
var mouseX=0;
var mouseY=0;
var canvasPos=getPosition(canvas);

ctx.addEventListener("mousemove",setMousePosition,false);
function getPosition(e1) {
  var xPosition = 0;
  var yPosition = 0;

  while (e1) {
    xPosition += (e1.offsetLeft - e1.scrollLeft + e1.clientLeft);
    yPosition += (e1.offsetTop - e1.scrollTop + e1.clientTop);
    e1 = e1.offsetParent;
  }
  return { x: xPosition, y: yPosition };
}
function setMousePosition(e) {
  mouseX = e.clientX - canvasPos.x;
  mouseY = e.clientY - canvasPos.y;

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.beginPath();
  ctx.arc(mouseX, mouseY, 50, 0, 2 * Math.PI, true);
  ctx.fillStyle = "#FF6A6A";
  ctx.fill();
  ctx.closePath();
}

function getPosition(e1) {
  var xPosition=0;
  var yPosition=0;
  while(e1) {
    xPosition+=(e1.offsetLeft-e1.scrollLeft+e1.clientLeft);
    yPosition+=(e1.offsetTop-e1.scrollTop+e1.clientTop);
    e1=e1.offsetParent;
  }
  return {
    x: xPosition,
    y: yPosition
  };
}

<canvas id="canvas"></canvas>

目标是让 Canvas 元素跟随鼠标移动。我的尝试粘贴在上面。我尝试检索确切的鼠标坐标并用它来重新绘制元素。我似乎没有得到任何输出，只有一 block 空白 Canvas 。任何帮助表示赞赏。

Answer 1

您有 2 个拼写错误:

1. 变量上下文...
2. ctx.addEventListener(...)

:ctx.addEventListener() 是不可能的，因为上下文没有事件。 Canvas 上确实有这些。

var canvas=document.getElementById('canvas');
// edit from context to ctx
var ctx=canvas.getContext("2d");
var mouseX=0;
var mouseY=0;
var canvasPos=getPosition(canvas);
// edit ctx to canvas
canvas.addEventListener("mousemove",setMousePosition,false);
function getPosition(e1) {
  var xPosition = 0;
  var yPosition = 0;

  while (e1) {
    xPosition += (e1.offsetLeft - e1.scrollLeft + e1.clientLeft);
    yPosition += (e1.offsetTop - e1.scrollTop + e1.clientTop);
    e1 = e1.offsetParent;
  }
  return { x: xPosition, y: yPosition };
}
function setMousePosition(e) {
  mouseX = e.clientX - canvasPos.x;
  mouseY = e.clientY - canvasPos.y;

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.beginPath();
  ctx.arc(mouseX, mouseY, 50, 0, 2 * Math.PI, true);
  ctx.fillStyle = "#FF6A6A";
  ctx.fill();
  ctx.closePath();
}

function getPosition(e1) {
  var xPosition=0;
  var yPosition=0;
  while(e1) {
    xPosition+=(e1.offsetLeft-e1.scrollLeft+e1.clientLeft);
    yPosition+=(e1.offsetTop-e1.scrollTop+e1.clientTop);
    e1=e1.offsetParent;
  }
  return {
    x: xPosition,
    y: yPosition
  };
}

<canvas id="canvas"></canvas>