내 점 - 점 게임을 가장 가까운 점에 '맞추기'를 시도합니다.

Question

간단한 계산 방법을 알고 있지만 저를 도와 줄 수 있습니까?

Here's the fiddle.

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/

당신을;

아, 그리고 당신은 에지 점을 조심해야한다 - 내가 잘못된 링크를 넣어 생각