javascript - 如何将对象放置在 Canvas 网格内

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

让我们分阶段构建它。首先，我们需要一个函数来获取鼠标相对于 Canvas (或任何其他元素)的位置:

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 cell(x, y) {
    return Math.floor(x / CELL_SIZE) + (ROWS * Math.floor(y / CELL_SIZE));
}

以及将对象放置在 Canvas 上 cell 给定位置的函数(使用小圆圈):

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();
}

现在让我们使用那些东西:

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/