Question

我在这里设置了一个JSfiddle。我正在绘制一个画布网格，并希望允许用户选择一种颜色并且“绘制”＆＃39;网格单元格像像素艺术。有人能指出我正确的方向吗？

var c_canvas = document.getElementById("c");
var context = c_canvas.getContext("2d");

for (var x = 0.5; x < 501; x += 20) {
context.moveTo(x, 0);
context.lineTo(x, 381);
}

for (var y = 0.5; y < 381; y += 20) {
context.moveTo(0, y);
context.lineTo(500, y);
}


context.strokeStyle = "#ddd";
context.stroke();

Answer 1

这应该让你更接近。

 function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top
        };
      }
function getNearestSquare(position) {
 var x = position.x;
    var y = position.y;
if (x < 0 || y < 0) return null;
    x = (Math.floor(x / 20) * 20) + 0.5
    y = (Math.floor(y / 20) * 20) + 0.5
    return {x: x, y: y};
}
$(c_canvas).click(function(evt) {
    var pos = getNearestSquare(getMousePos(c_canvas, evt));
    if (pos != null) {
        context.fillStyle="#FF0000";
        context.fillRect(pos.x,pos.y,20,20);
    }
});

我在你的小提琴上尝试了这个，添加这个JS代码给你一个点击事件，让你点击并绘制一个红色正方形大小的区域，你只需要使用填充样式作为用户可以更改的变量。

编辑：我添加了逻辑来找到左上角。

在网格中绘制单元格

1 个答案: