캔버스 그리드 안에 개체를 배치하는 방법

Question

이것은 정적 그리드 용 코드입니다. 이제는 셀 중 하나에 객체를 클릭하여 동적으로 배치하려고합니다. 어떻게해야합니까?

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 

for (var x = 0; x <= 400; x += 80) // Vertical lines in the canvas 
{ 
    ctx.moveTo(x, 0); 
    ctx.lineTo(x, 400); 
    ctx.stroke(); 
} 

for (var y=0 ; y<=400 ; y +=80) // Horizontal lines in the canvas 
{ 
    ctx.moveTo(0, y); 
    ctx.lineTo(400, y); 
    ctx.stroke(); 
} 

Answer 1

단계별로 이것을 만들어 보겠습니다. 당신이 그려 한 보드에 셀의 인덱스에 그 좌표를 변환하는

function findPos(obj) { 
    var curleft = 0, curtop = 0; 
    if (obj.offsetParent) { 
     do { 
      curleft += obj.offsetLeft; 
      curtop += obj.offsetTop; 
     } while (obj = obj.offsetParent); 
     return { x: curleft, y: curtop }; 
    } 
    return undefined; 
} 

그리고 함수 : 첫째, 우리는 캔버스를 기준으로 마우스 위치 (또는 다른 요소)를 얻을 수있는 기능이 필요합니다 :

function put(cell) { 
    var x = CELL_SIZE * (cell % ROWS); 
    var y = CELL_SIZE * Math.floor(cell/ROWS); 
    ctx.beginPath(); 
    ctx.arc(x + (CELL_SIZE/2), y + (CELL_SIZE/2), 5, 0, 2 * Math.PI); 
    ctx.stroke(); 
} 

이제

의 그 물건을 사용하자 :

function cell(x, y) { 
    return Math.floor(x/CELL_SIZE) + (ROWS * Math.floor(y/CELL_SIZE)); 
} 

그리고 함수 cell (이 작은 원을 사용)에 의해 주어진 위치에서 캔버스에 객체를 배치

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
var CELL_SIZE = 80; 
var ROWS = 5; 

c.addEventListener("click", function(e) { 
    var pos = findPos(this); 
    var x = e.pageX - pos.x; 
    var y = e.pageY - pos.y; 
    put(cell(x, y)); 
}); 

function createBoard() { 
    for (var x = 0; x <= 400; x += CELL_SIZE) { 
     ctx.moveTo(x, 0); 
     ctx.lineTo(x, 400); 
     ctx.stroke(); 
    } 
    for (var y = 0; y <= 400; y += CELL_SIZE) { 
     ctx.moveTo(0,y); 
     ctx.lineTo(400,y); 
     ctx.stroke(); 
    } 
} 

createBoard(); 

JSFIDDLE에 대한 완전한 작동 예제를 참조하십시오.

• http://jsfiddle.net/2n6H5/