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]); 
     }