getImageData和putImageData为画布益智项目

Question

我已经与我的画布工作下面的代码：

function clickBox() //Get every cell by coordinate on the grid. 
{ 
    var xRectFill = 0; //We start our search on the left side of the board. 
    var yRectFill = 0; //We start our search at the top of the board. 
    var rectFillArrayX = []; //We will store every X-Coordinate of a cell here. 
    var rectFillArrayY = []; //We will store every Y-Coordinate of a cell here. 
    var mouseX = event.offsetX; 
    var mouseY = event.offsetY; 
    for (i3 = 0; i3 <= 8; i3++) //We will fill the X and Y values of our storage array here. 
    { 
     rectFillArrayX[i3] = xRectFill; //We will get each individual X-Coordinate and store from [0-8] 
     rectFillArrayY[i3] = yRectFill; //We will get each individual Y-Coordinate and store from [0-8] 
     xRectFill += 72; //After we fill an X value, we will use the value of the next cell. 
     yRectFill += 72; //After we fill a Y value, we will use the value of the next cell. 
    } 
    for (i4 = 0; i4 <= 8; i4++) 
    { 
     if (mouseX >= rectFillArrayX[i4] && mouseX <= (rectFillArrayX[i4] + 72)) 
     { 
      for (i5 = 0; i5 <= 8; i5++) 
      { 
       if (mouseY >= rectFillArrayY[i5] && mouseY <= (rectFillArrayY[i5] + 72)) 
       { 
        ctx.clearRect(rectFillArrayX[i4], rectFillArrayY[i5], 71, 71); 
       } 
      } 
     } 
    } 
} 

我用帆布练通过设计的数独谜题。我有一个9 x 9的网格，并且函数“clickBox”当前获取鼠标的坐标并清除单元格。从鼠标单击事件调用时，此函数中的所有内容均按预期工作。

我现在想做的是制作clearRect清除的画布部分的副本，并将该副本放回到画布中，只要我点击另一个区域。

我已经尝试了几种不同的方法并修改了一下。我认为我需要使用画布函数getImageData和putImageData，但在使其运行方面没有成功。

我已经尝试存储我的X和Y坐标在一个盒子被清除的时刻，然后将这些坐标传递给getImageData，然后在发生新的点击时放置putImageData。我不确定我是否正确地做了这件事，并且从未做过任何事情。

我的理论是在clearRect函数发生之前使用getImageData，然后在下次单击时，在先前单击的单元格上使用putImageData。

有人可以告诉我正确使用getImageData和putImageData这个项目吗？

这是我试图解决：

function clickBox() //Get every cell by coordinate on the grid. 
{ 
    var xRectFill = 0; //We start our search on the left side of the board. 
    var yRectFill = 0; //We start our search at the top of the board. 
    var rectFillArrayX = []; //We will store every X-Coordinate of a cell here. 
    var rectFillArrayY = []; //We will store every Y-Coordinate of a cell here. 
    var mouseX = event.offsetX; 
    var mouseY = event.offsetY; 

    if (lastLocation[0] != null) 
    { 
     ctx.putImageData(imgData, lastLocation[0], lastLocation[1], 70); 
    } 
    for (i3 = 0; i3 <= 8; i3++) //We will fill the X and Y values of our storage array here. 
    { 
     rectFillArrayX[i3] = xRectFill; //We will get each individual X-Coordinate and store from [0-8] 
     rectFillArrayY[i3] = yRectFill; //We will get each individual Y-Coordinate and store from [0-8] 
     xRectFill += 72; //After we fill an X value, we will use the value of the next cell. 
     yRectFill += 72; //After we fill a Y value, we will use the value of the next cell. 
    } 
    for (i4 = 0; i4 <= 8; i4++) 
    { 
     if (mouseX >= rectFillArrayX[i4] && mouseX <= (rectFillArrayX[i4] + 72)) 
     { 
      for (i5 = 0; i5 <= 8; i5++) 
      { 
       if (mouseY >= rectFillArrayY[i5] && mouseY <= (rectFillArrayY[i5] + 72)) 
       { 
        var imgData = ctx.getImageData(rectFillArrayX[i4], rectFillArrayY[i4], 72, 72); 
        var lastLocation = [rectFillArrayX[i4], rectFillArrayY[i5]]; 
        ctx.clearRect(rectFillArrayX[i4], rectFillArrayY[i5], 71, 71); 
       } 
      } 
     } 
    } 
} 

我也有尝试：

function clickBox() //Get every cell by coordinate on the grid. 
{ 
    var xRectFill = 0; //We start our search on the left side of the board. 
    var yRectFill = 0; //We start our search at the top of the board. 
    var rectFillArrayX = []; //We will store every X-Coordinate of a cell here. 
    var rectFillArrayY = []; //We will store every Y-Coordinate of a cell here. 
    var mouseX = event.offsetX; 
    var mouseY = event.offsetY; 
    var lastLocation = []; 

    if (typeof lastLocation[0] !== 'undefined') 
    { 
     alert("Array is defined"); 
     ctx.putImageData(imgData, lastLocation[0], lastLocation[1], 70); 
    } 
    for (i3 = 0; i3 <= 8; i3++) //We will fill the X and Y values of our storage array here. 
    { 
     rectFillArrayX[i3] = xRectFill; //We will get each individual X-Coordinate and store from [0-8] 
     rectFillArrayY[i3] = yRectFill; //We will get each individual Y-Coordinate and store from [0-8] 
     xRectFill += 72; //After we fill an X value, we will use the value of the next cell. 
     yRectFill += 72; //After we fill a Y value, we will use the value of the next cell. 
    } 
    for (i4 = 0; i4 <= 8; i4++) 
    { 
     if (mouseX >= rectFillArrayX[i4] && mouseX <= (rectFillArrayX[i4] + 72)) 
     { 
      for (i5 = 0; i5 <= 8; i5++) 
      { 
       if (mouseY >= rectFillArrayY[i5] && mouseY <= (rectFillArrayY[i5] + 72)) 
       { 
        var imgData = ctx.getImageData(rectFillArrayX[i4], rectFillArrayY[i4], 72, 72); 
        var lastLocation = [rectFillArrayX[i4], rectFillArrayY[i5]]; 
        ctx.clearRect(rectFillArrayX[i4], rectFillArrayY[i5], 71, 71); 
       } 
      } 
     } 
    } 
} 

Puzzle

Answer 1

在我看来，你需要创建这些部分作为表的表细胞。然后，您可以轻松地隐藏和取消隐藏事件或任何其他细胞。

您可以设置<tr id="your_cell" style="display: none;">，然后用JavaScript显示它回：

var cell_with_data = document.getElementById('your_cell').style; 
cell_with_data.display = 'table-row'/'block'; 

细胞可以通过

var row = document.getElementById("myRow"); 
row.deleteCell(0); 

只是一个建议BTW被删除。

Answer 2

我终于修好了。

function clickBox() //Get every cell by coordinate on the grid. 
{ 
    var xRectFill = 0; //We start our search on the left side of the board. 
    var yRectFill = 0; //We start our search at the top of the board. 
    var rectFillArrayX = []; //We will store every X-Coordinate of a cell here. 
    var rectFillArrayY = []; //We will store every Y-Coordinate of a cell here. 
    var mouseX = event.offsetX; 
    var mouseY = event.offsetY; 
    if (typeof lastLocation !== 'undefined' && lastLocation.length > 0) 
    { 
     // the array is defined and has at least one element 
     ctx.putImageData(imgData, lastLocation[0], lastLocation[1]); 
    } 
    for (i3 = 0; i3 <= 8; i3++) //We will fill the X and Y values of our storage array here. 
    { 
     rectFillArrayX[i3] = xRectFill; //We will get each individual X-Coordinate and store from [0-8] 
     rectFillArrayY[i3] = yRectFill; //We will get each individual Y-Coordinate and store from [0-8] 
     xRectFill += 72; //After we fill an X value, we will use the value of the next cell. 
     yRectFill += 72; //After we fill a Y value, we will use the value of the next cell. 
    } 
    for (i4 = 0; i4 <= 8; i4++) 
    { 
     if (mouseX >= rectFillArrayX[i4] && mouseX <= (rectFillArrayX[i4] + 72)) 
     { 
      for (i5 = 0; i5 <= 8; i5++) 
      { 
       if (mouseY >= rectFillArrayY[i5] && mouseY <= (rectFillArrayY[i5] + 72)) 
       { 
        lastLocation = [rectFillArrayX[i4], rectFillArrayY[i5]]; 
        ctx.clearRect(rectFillArrayX[i4], rectFillArrayY[i5], 71, 71); 
       } 
      } 
     } 
    } 
} 

我创建了一个全局变量getImageData其他地方，并添加了功能附近开始检查，看的，而不是事先创建一个空数组，如果数组的创建。

最后补充：

if (typeof lastLocation !== 'undefined' && lastLocation.length > 0) 
     { 
      // the array is defined and has at least one element 
      ctx.putImageData(imgData, lastLocation[0], lastLocation[1]); 
     }