如何在 canvas javascript 中使用计时器？

Question

我需要在 canvas 的某个地方随机出现一个矩形，然后它需要在一个新的地方随机出现，但我有一个问题，它出现了一个新的但以前的矩形留在一开始的地方，然后 canvas 中有很多矩形，我只需要一个，这就是我所做的：

 function rectangle(x,y){
    var ctx
    ctx.beginPath();
    ctx.rect(20, 20, 15, 10);
    ctx.stroke();
    }
 function randomMove(){
    var myVar;
    var x;
    var y;
    x = Math.floor(Math.random() * 10) + 1;
    y = Math.floor(Math.random() * 10) + 1;
    myVar = setInterval( ()=> {rectangle(x,y)}, 5000); // pass the rectangle function
    }

Answer 1

您需要清除 canvas。

最简单的方法是在整个 canvas 上绘制一个矩形（假设它是白色背景）

ctx.fillStyle = "white";
ctx.fillRect(0, 0, width, height);

或者如果它是透明的...

ctx.clearRect(0, 0, width, height);

您需要在每一帧都执行此操作。

const ctx = window.canvas.getContext("2d");

function clearCanvas() {
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function rectangle(x, y) {
  ctx.beginPath();
  ctx.fillStyle = "red";
  ctx.rect(x, y, 15, 10);
  ctx.stroke();
}

function randomMove() {
  var myVar;
  var x;
  var y;
  x = Math.floor(Math.random() * ctx.canvas.width) + 1;
  y = Math.floor(Math.random() * ctx.canvas.height) + 1;
  rectangle(x, y);
}

function draw() {
  clearCanvas();
  randomMove();
}

myVar = setInterval(draw, 200);
draw();

<canvas id="canvas"></canvas>

如何在 canvas javascript 中使用计时器？

How to work with timer in canvas javascript?

javascript

random

canvas

timer