Javascript/Canvas - 找到相对于坐标网格位置的鼠标坐标

Question

我做了一个小玩具，可以让我的鼠标相对于 canvas 上的中心点形成角度。我试图做到这一点，这样我就可以点击移动那个点，并想出了这个：

我已经想出如何做到这一点，这样我就可以改变中心点一次而不会出现奇怪的事情，但是通过了，我不知道该怎么做。不过，我知道这是怎么回事。因为它在检查坐标网格的原始位置和新位置之间的关系，但是我移动它之后，我使用的数字不再有效。

在使用 ctx.translate() 后，我需要一种获取坐标网格位置的方法，但我不确定这是否可行。

Answer 1

与其移动整个 canvas，不如移动 'toy thing' 的中心点？

所以

//move the location of the coordinate grid on click
canvas.addEventListener('click', function (evt) {
    var mousePos = getMousePos(canvas, evt);
    gridOffsetX = mousePos.x - 250;
    gridOffsetY = mousePos.y - 250;
    ctx.translate(gridOffsetX, gridOffsetY);
}, false);

var centerPoint = {x: 250, y:250}
//move the location of the coordinate grid on click
canvas.addEventListener('click', function (evt) {
    centerPoint = getMousePos(canvas, evt);
}, false);

演示： http://jsfiddle.net/7264eahd/

Javascript/Canvas - 找到相对于坐标网格位置的鼠标坐标

Javascript/Canvas - find mouse coords relative to the location of the coordinate grid

javascript

canvas