Question

我在这里有一个正在处理的项目，以便可以使用画布尝试用户单击的位置。我正在尝试绘制一个10像素的圆圈-足够小，以查看用户在画布上单击的位置以及移至用户单击并跟随光标的位置。以下是我的代码，但由于某些原因未显示圆圈。我对canvas和JavaScript还是有些陌生，我们将不胜感激。

var cn = document.getElementById("main");
var c = cn.getContext("2d");

var mouse = {x:150, y:0};

window.addEventListener('mousedown', mHandler);

function mHandler(event) {
    //mouse.x = event.clientX;
    //mouse.y = event.clientY;
    mouse.x = event.pageX;
    mouse.y = event.pageY;
};

function main() {
   c.clearRect(0, 0, cn.width, cn.height);
   ctx.beginPath();
   ctx.arc(0, 0, 0, 0, 2 * Math.PI);
   ctx.stroke();
   c.fillRect(mouse.x, mouse.y, 50, 50);
}

setInterval(main, 1000 / 60);

<p>Click on the Canvas!</p>
<canvas id="main" height="300" width="300" style="border: 1px solid black"></canvas>

Answer 1

您将在0 x 0处绘制半径为0的圆。

我在这里使用ctx.save() / ctx.translate() / ctx.restore()首先对上下文的转换矩阵进行突变，因此我们仍在该矩阵的0x0处进行绘制。（这样可以使其他转换更容易一些。）

（您也可以只ctx.arc(mouse.x, mouse.y, 50, ...)。）

此外，您想使用offsetX / offsetY，以便获得相对于画布而不是页面的鼠标坐标。

var cn = document.getElementById("main");
var ctx = cn.getContext("2d");

var mouse = { x: 150, y: 0 };

window.addEventListener("mousedown", mHandler);

function mHandler(event) {
  mouse.x = event.offsetX;
  mouse.y = event.offsetY;
}

function main() {
  ctx.clearRect(0, 0, cn.width, cn.height);
  ctx.save();
  ctx.translate(mouse.x, mouse.y);
  ctx.beginPath();
  ctx.arc(0, 0, 50, 0, 2 * Math.PI);
  ctx.stroke();
  ctx.restore();
  ctx.fillRect(mouse.x, mouse.y, 5, 5);
}

setInterval(main, 1000 / 60);

<p>Click on the Canvas!</p>
<canvas id="main" height="300" width="300" style="border: 1px solid black"></canvas>

通过JavaScript使用Canvas，如何使圆移动到单击它的位置？

1 个答案: