javascript - HTML Canvas - 在选定位置绘制矩形

Question

我正在使用 AngularJS 制作一个简单的游戏，我想向游戏添加 Canvas 。我以前从未使用过它，并且仍在学习中。我不知道如何执行以下操作:

我制作了一个网格以便更容易查看。所以我想要的是当用户单击一个矩形时，该矩形应该填充一种颜色。

   var builder = function () {
    var build_canvas = document.getElementById("builder-canvas");
    var build_context = build_canvas.getContext("2d");

    var x;
    for (x = 0.5; x <= 800; x += 15) {
        build_context.moveTo(x, 0);
        build_context.lineTo(x, 390);
    }

    var y;
    for (y = 0.5; y < 400; y += 10) {
        build_context.moveTo(0, y);
        build_context.lineTo(796, y);
    }

    build_context.strokeStyle = "#000000";
    build_context.stroke();
};
builder();

这是一个 fiddle :http://jsfiddle.net/JQd4j/

提前谢谢您。

Answer 1

简单地量化从鼠标点击位置获得的 x 和 y 值:

build_canvas.onclick = function(e) {
    var rect = build_canvas.getBoundingClientRect(), // canvas abs. position
        x = e.clientX - rect.left,                   // relative x to canvas
        y = e.clientY - rect.top;                    // relative y to canvas

    x = ((x / 15)|0) * 15;                           // quantize x by 15
    y = ((y / 10)|0) * 10;                           // quantize y by 10

    build_context.fillRect(x+1, y+1, 14, 9);         // fill rectangle
}

此量化的作用是:

(x / 15)|0

除以 15 并去掉分数。然后再次乘以相同的数字以获得单元格的起始位置:

((x / 15)|0) * 15

对于 y 也是如此。

<强> Modified fiddle