在网格中绘制单元格

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

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

来源

2014-10-10 TerryG

嗯，这应该让你更接近。

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

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

来源

2014-10-10 17:14:47 Shriike

这回答我的问题完美，谢谢！另一个小问题是：我正在计算每种颜色存在多少个正方形，并且一直在使用document.click事件，但它也会在画布外注册点击。有小费吗？ – TerryG 2014-10-10 17:56:06

通过改变为$（c_canvas）.click（function（evt）{ – TerryG 2014-10-10 18:24:24

在网格中绘制单元格

回答

相关问题