画布中的鼠标坐标不起作用

Question

＆＃13;

＆＃13;

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
  };
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

你有两个拼写错误：

1. var context...
2. ctx.addEventListener(...)

：ctx.addEventListener()是不可能的，因为上下文没有事件。 画布确实有那些。

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>

Answer 2

您要将事件监听器添加到canvas而不是其上下文

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

canvas.addEventListener("mousemove",setMousePosition,false); // <-- this
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>