Javascript / Canvas - 找到相對於坐標網格位置的鼠標坐標

Question

我制作了一個小玩具，可以讓我的鼠標角度相對於畫布上的中心點。 我試圖做到這一點，所以我可以點擊移動這一點，並想出了這個：

http://jsfiddle.net/Strontium/7htLjvqs/

我已經想出如何制作它所以我可以改變中心點一次沒有表現出奇怪的東西，但通過它，我不知道該怎么做。 不過，我知道這是怎么回事。 這是因為它正在檢查坐標網格的原始位置與新坐標網格之間的關系，但在移動之后，我使用的數字不再有效。

在使用ctx.translate()之后我需要一種方法來獲取坐標網格的位置，但我不確定這是否可能。

Answer 1

為什么不移動“玩具物品”的中心點，而不是移動整個畫布？

而不是

//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/