Question

我正在使用AngularJS制作一个简单的游戏，我想在游戏中添加一个画布。我之前从未使用它，而且我还在学习。我不知道如何执行以下操作：

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

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

这是一个小提琴：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

HTML画布 - 在选定位置绘制矩形

1 个答案: