javascript之在 Web 浏览器中创建可点击的网格

我想在 HTML5 Canvas 上绘制一个 10 x 10 正方形的网格，并在正方形上显示数字 1-100。单击一个方 block 应调用一个 JavaScript 函数，并将方 block 的编号作为变量传递给该函数。

请您参考如下方法:

首先，我鼓励您阅读 this answer另一个涉及 HTML5 Canvas 的问题。您需要了解没有正方形。为了检测对“正方形”的点击，您必须跟踪从每个 Canvas 坐标到它逻辑上包含的正方形的映射，处理整个 Canvas 上的单击事件，找出哪个正方形(s) 您想要更改，然后使用您想要的更改重新绘制 Canvas 。

那么——因为你似乎不反对使用更合适的技术——我鼓励你在 HTML 中这样做(其中每个“正方形”类似于 <div>，它是绝对定位、大小和颜色的使用 CSS)或 SVG(如果您需要方 block 能够旋转，或者想要引入其他形状，请使用 <rect>)。

HTML 和 SVG 都是“保留模式”图形模式系统，其中绘制形状“保留”该形状的概念。您可以移动形状、更改颜色、大小等，计算机会自动为您重新绘制。此外，对于您的用例更重要的是，您可以(使用 HTML 和 SVG):

function changeColor(evt){ 
  var clickedOn = evt.target; 
  // for HTML 
  clickedOn.style.backgroundColor = '#f00'; 
 
  // for SVG 
  clickedOn.setAttribute('fill','red'); 
} 
mySquare.addEventListener('click',changeColor,false); 

编辑:我用 JavaScript 和 HTML 创建了一个简单的实现:http://jsfiddle.net/6qkdP/2/

这是核心代码，以防 JSFiddle 出现故障:

function clickableGrid( rows, cols, callback ){ 
  var i=0; 
  var grid = document.createElement('table'); 
  grid.className = 'grid'; 
  for (var r=0;r<rows;++r){ 
    var tr = grid.appendChild(document.createElement('tr')); 
    for (var c=0;c<cols;++c){ 
      var cell = tr.appendChild(document.createElement('td')); 
      cell.innerHTML = ++i; 
      cell.addEventListener('click',(function(el,r,c,i){ 
        return function(){ callback(el,r,c,i); } 
       })(cell,r,c,i),false); 
    } 
  } 
  return grid; 
}