Javascript 如何将表格用作图形网格

我正在尝试创建一个包含10000个单元格的表格，并将其转换为一个画布，用户可以在画布上通过鼠标移动进行绘制

我希望能够通过突出显示鼠标在按住某些键blue=ctrl、red=shift等时移动的单元格背景，在画布上进行绘制

我已经生成了我的HTML代码，但是我在使用表时遇到了问题。它似乎试图选择表格单元格，而不是在单元格中着色

下面是我所说内容的屏幕截图：

HTML:

JavaScript:

function createCanvas()
{
    var side = 100;
    var tbody = document.getElementById( "tablebody" );

for( var i = 0; i < side; i++) 
{
    var row = document.createElement( "tr" );

    for( var j = 0; j < side; j++)
    {
        var cell = document.createElement( "td" );
        row.appendChild( cell );
    }
    tbody.appendChild( row );
}
document.getElementById( "canvas" ).addEventListener( "mousemove", processMouseMove, false );
}

function processMouseMove( e )
{
  if( e.target.tagName.toLowerCase() == "td" )
{
    if( e.ctrlKey )
    {
        e.target.setAttribute( "class", "blue" );
    }
    if ( e.shiftKey )
    {
        e.target.setAttribute( "class", "red" );
    }
}
}
window.addEventListener( "load", createCanvas, false );

---

我会在表格前面添加一个空白的div position absolute，并读取td的高度和宽度，以通过鼠标移动计算表格中的xy位置。然后做表格魔术。

我建议你制作一个画布元素，并用与表格单元格大小相同的像素来绘制，而不是制作一万个表格单元格。可以使用模运算将鼠标坐标转换为像素位置

例如，如果鼠标位于x、y位置，且每个像素的大小为4，则鼠标位于像素上方，以便：

行=x-x%4

列=y-y%4

下面的代码片段演示了这种方法。运行代码段时，必须在包含画布的框架内单击，以便将鼠标焦点置于该框架

var油漆={ 像素：{大小：4}， 网格：{numRows:100，numCols:100} }; window.onload=函数{ var canvas=document.getElementById'paintCanvas'， context=canvas.getContext'2d'， 偏移量=getOffsetcanvas，document.body， pixelSize=Paint.pixel.size， numRows=Paint.grid.numRows， numCols=Paint.grid.numCols， 绘画=假； canvas.width=numCols*像素大小； canvas.height=numRows*像素大小； window.onkeydown=函数事件{ var代码=event.which； 如果代码==17 | |代码==16{ 绘画=真实； context.fillStyle=code==17？'1b6bb5'：'b53a31'； } }; window.onkeyup=函数事件{ var代码=event.which； 如果代码==17 | |代码==16{ 绘画=假； } }; canvas.onmousemove=函数事件{ 如果！画画{ 回来 } event=event | | window.event； var mouse=getMousePositionevent， x=鼠标.x-偏移量.left， y=鼠标.y-偏移量.top； x-=x%像素大小； y-=y%像素大小； context.fillRectx，y，pixelSize，pixelSize； }; }; 函数getOffsetelement，祖先{ 左向量=0， top=0； while元素！=祖先{ left+=element.offsetLeft； top+=元素offsetTop； element=element.parentNode； } 返回{left:left，top:top}； } 函数getMousePositionevent{ 如果event.pageX！==未定义{ 返回{x:event.pageX，y:event.pageY}； } 返回{ x:event.clientX+document.body.scrollLeft+ document.documentElement.scrollLeft， y:event.clientY+document.body.scrollTop+ document.documentElement.scrollTop }; } 身体{ 字体系列：无衬线； } 帆布{ 边框：2个实心ccc； } 单击此处开始。按住Ctrl键以蓝色绘制，按住Shift键以红色绘制

---

这与我的解决方案大致相同，但没有背景中的表格，这是一个非常好的答案，因此对我来说，这回答了问题。

table{
width: 400px;
height: 400px;
border-collapse: collapse;
}

td {
width: 4px;
height: 4px;
border-collapse: collapse;
}

function createCanvas()
{
    var side = 100;
    var tbody = document.getElementById( "tablebody" );

for( var i = 0; i < side; i++) 
{
    var row = document.createElement( "tr" );

    for( var j = 0; j < side; j++)
    {
        var cell = document.createElement( "td" );
        row.appendChild( cell );
    }
    tbody.appendChild( row );
}
document.getElementById( "canvas" ).addEventListener( "mousemove", processMouseMove, false );
}

function processMouseMove( e )
{
  if( e.target.tagName.toLowerCase() == "td" )
{
    if( e.ctrlKey )
    {
        e.target.setAttribute( "class", "blue" );
    }
    if ( e.shiftKey )
    {
        e.target.setAttribute( "class", "red" );
    }
}
}
window.addEventListener( "load", createCanvas, false );