在网格中绘制单元格

Question

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

http://jsfiddle.net/g51bx1nb/

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代码给你一个在点击事件会让你点击和油漆面积的广场之一的大小红色，你只需要使用将样式填充为用户可以更改的变量。

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