Question

我知道这是一个简单的计算，但你可以帮助我吗？

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var radius = 4;

for (x=radius; x<canvas.width-radius; x+=50) {
    for (y=radius; y<canvas.height-radius; y+=50) {
        context.beginPath();
        context.arc(x, y, radius, 0, 2 * Math.PI, false);
        context.stroke();
    }
}
$('canvas').click(canvasClicked);

function canvasClicked(e) {
    var x = e.pageX - $(this).offset().left;
    var y = e.pageY - $(this).offset().top;
    context.beginPath();
    context.arc(x, y, radius, 0, 2 * Math.PI, false);
    context.fillStyle = 'black';
    context.fill();
    context.lineWidth = 1;
    context.strokeStyle = '#000000';
    context.stroke();
};

我正在尝试确定哪个cirlce最接近用户点击的位置。

Answer 1

答案在这里：

var newX = Math.round(x/50)*50 + radius;
var newY = Math.round(y/50)*50 + radius;
x = newX;
y = newY;

这是小提琴： http://jsfiddle.net/avall/vtEER/1/

将点击的位置四舍五入到点生成器的分辨率;

哦，你应该注意边缘点 - 没有ifs那个

试图让我的点到点游戏“捕捉到”最近的点

1 个答案: