clearRect() 工作异常

Question

ClearRect 的工作方式很奇怪；我试图刷新 canvas 但它不适用于此代码

<!DOCTYPE html>
<html>
    <head>
        <title> Crypt </title>
    </head>
    <body>
        <canvas id="canvas" width="500" height="300" style="border-style: dashed;"></canvas>
        <script type="text/javascript">
        var can     =   document.getElementById("canvas")               ,
            ctx     =   can.getContext("2d")                            ,
            posX    =   0                                               ,
            posY    =   0                                               ;

        function game(){ // HERE
            ctx.clearRect(0, 0, can.width, can.height);
            ctx.rect(posX, posY, 20, 20);
            ctx.stroke();

            posX += 10;
            posY += 10;
        }

        window.setInterval("game()", 100);
        </script>
    </body>
</html>

完美适用于：

<!DOCTYPE html>
<html>
    <head>
        <title> Crypt </title>
    </head>
    <body>
        <canvas id="canvas" width="500" height="300" style="border-style: dashed;"></canvas>
        <script type="text/javascript">
        var can     =   document.getElementById("canvas")               ,
            ctx     =   can.getContext("2d")                            ,
            posX    =   0                                               ,
            posY    =   0                                               ;

        function game(){    // HERE
            ctx.clearRect(0, 0, can.width, can.height);
            ctx.strokeRect(posX, posY, 20, 20);

            posX += 10;
            posY += 10;
        }

        window.setInterval("game()", 100);
        </script>
    </body>
</html>

有人能解释一下吗？谢谢我真的不明白 javascript 是如何工作的所以如果你有一些讲座，我会接受它

谢谢^2

Answer 1

您面临的问题不是 clearRect()，而是您总是在同一个 Path 对象上调用 ctx.rect()。

为避免这种情况，您必须在每次绘制新图时调用 ctx.beginPath()：

var can = document.getElementById("canvas"),
  ctx = can.getContext("2d"),
  posX = 0,
  posY = 0;

function game() {
  ctx.clearRect(0, 0, can.width, can.height);

  // create a new Path2d
  ctx.beginPath();

  ctx.rect(posX, posY, 20, 20);
  ctx.stroke();

  posX += 10;
  posY += 10;
}

window.setInterval(game, 100);

<canvas id="canvas" width="500" height="300" style="border-style: dashed;"></canvas>

或者，您可以调用 ctx.strokeRect()，它在一个方法中处理 ctx.beginPath();、ctx.rect(); 和 ctx.stroke();。

var can = document.getElementById("canvas"),
  ctx = can.getContext("2d"),
  posX = 0,
  posY = 0;

function game() { // HERE
  ctx.clearRect(0, 0, can.width, can.height);

  ctx.strokeRect(posX, posY, 20, 20);

  posX += 10;
  posY += 10;
}

window.setInterval(game, 100);

<canvas id="canvas" width="500" height="300" style="border-style: dashed;"></canvas>

clearRect() 工作异常

clearRect() works strangely

html

javascript

html5-canvas