javascript - HTML5 Canvas - 用剪辑删除后重新绘制新圆圈

Question

我有一个独特的问题。

我正在使用 HTML5 和 Canvas 创建一个蛇游戏

我有一个函数，可以在棋盘上随机生成苹果，并在一段时间后删除它们。为了删除圆圈，您必须使用 clip() 函数，然后使用 clearRect()。

但是，使用剪辑功能后，您将无法再绘制新的圆。

我找到的解决方案是使用ctx.save()和ctx.restore()。然而，如果你玩这个游戏，你就会发现当圆圈消失并出现新圆圈时，蛇会变得疯狂。

我怀疑这与我使用保存和恢复功能有关。

这是有问题的具体代码

var width = canvas.width;
var height = canvas.height;
var applesArray = [];            // Store the coordinates generated randomly

// Generates a random coordinate within the confines of the canvas and pushes it to the apples array
function randCoord() {
    var coord = Math.floor(Math.random() * height);
    applesArray.push(coord);
    return coord;
}

function generateApples() {
    ctx.beginPath();
    ctx.fillStyle = "green";
    ctx.arc(randCoord(),randCoord(),3,0, 2 * Math.PI);
    ctx.fill();
    ctx.save();           // To redraw circles after clip, we must use save
    ctx.clip();           // Allows only the circle region to be erased
    setTimeout(function() {
        ctx.clearRect(0, 0, width, height);
    },3000);
    ctx.restore();       // We must restore the previous state.
}

setInterval(function() {
    generateApples();
},4000);

您可以在这里玩游戏

https://jsfiddle.net/2q1svfod/9/

谁能解释一下这种奇怪的行为吗？我没有看到它的到来？

Answer 1

该代码有多个问题。

绘制蛇的代码(例如 upArrow 函数)只是扩展了当前路径。这是一个问题，因为绘制苹果的代码开始了一条新路径。请注意，苹果绘图代码中的保存/恢复没有帮助，因为路径不是保存/恢复状态的一部分。绘制蛇的代码需要开始一条新路径。例如...

function upArrow() {
    if (direction == "up") {
        goUp = setInterval(function() {
            ctx.beginPath();
            ctx.moveTo(headX, headY);
            ctx.lineTo(headX, headY - 10);
            ctx.stroke();
            headY -= 10;
        }, 400);
    }
}

保存/剪辑/恢复调用位于绘制苹果的代码中。这些方法需要移至删除苹果的超时回调函数中。此外，删除苹果的代码将需要重新创建路径(因为蛇的绘制可能会更改绘制苹果和删除苹果之间的路径)。例如...

function generateApples() {
    var cx = randCoord();
    var cy = randCoord();
    ctx.beginPath();
    ctx.fillStyle = "green";
    ctx.arc(cx, cy,3,0, 2 * Math.PI);
    ctx.fill();
    setTimeout(function() {
        ctx.beginPath();
        ctx.arc(cx,cy,3,0, 2 * Math.PI);
        ctx.save();
        ctx.clip();
            ctx.clearRect(0, 0, width, height);
        ctx.restore();
    },40000);
}

这些更改将使您更接近您的预期。但是，仍然存在一些小问题。

绘制苹果时，苹果路径的边缘周围会出现一些抗锯齿效果。清除操作可能会错过清除其中一些像素。清除操作后，您可能会看到苹果所在位置的半透明轮廓。您可以通过在清除苹果时使用稍大的圆半径来解决此问题。

另一个问题是苹果可以画在蛇的上面。删除苹果也会删除蛇。这个问题没有简单的解决办法。您需要存储蛇的所有坐标，然后重新绘制蛇的全部或部分。

从长远来看，您可能需要考虑注释中关于重构逻辑以跟踪所有对象并在每帧重绘所有内容(或在每次更改后重绘所有内容)的建议。