畫布拼圖項目的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清除的畫布部分，並在每次單擊其他區域時將其放回畫布中。

我嘗試了幾種不同的方法，並進行了一些修補。 我想我需要使用canvas函數getImageData和putImageData，但是一直無法成功使用它。

我已經嘗試在清除框時存儲X和Y坐標，然后將這些坐標傳遞給getImageData，然后在每次發生新單擊時將putImageData放入。 我不確定自己是否做得正確，並且get / put似乎從未做任何事情。

我的理論是在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);
                }
            }
        }
    }
}

難題

Answer 1

我終於解決了。

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

Answer 2

我認為，您需要使用這些部分作為表格單元格來創建表格。 然后，您可以輕松隱藏和取消隱藏事件或其他任何事件的單元格。

您可以設置<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);

只是一個建議。