javascript - js中如何让一个对象闪烁一次？

Question

至少可以说我不精通js。

我在 js 的容器中有一个弹力球。当球击中容器的某个部分时，我希望一个盒子短暂亮起。我想控制眨眼的持续时间。我希望眨眼发生一次。

到目前为止，这有效，但眨眼时间非常短暂:

我有一个 Canvas 对象

<Canvas id="button1" width="100px" height="50px"></canvas>

这段代码就位了。为了简单起见，我们假设球位于正确的位置，并在很短的时间内将 ball_is_in_area 设置为 T。

var button1;
var button1ctx;
var ball_is_in_area = F;

button1 = document.getElementById("button1");  
button1ctx = button1.getContext("2d");
button1ctx.fillStyle = "white";
button1ctx.fillRect(0, 0, canvas.width, canvas.height); 

if( ball_is_in_area == T){
  snd.play();
  button1ctx.fillStyle = "red";
  button1ctx.fillRect(0, 0, canvas.width, canvas.height);
}

“不要使用 Canvas 对象，使用 X”类型的答案也值得赞赏!

Answer 1

使用requestAnimationFrame并基于 this sample ，您可以使用提供的时间戳参数，并且每当您撞到墙上时，延长闪烁结束时间的计时器。然后使用这个计时器来确定背景的颜色。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var x = canvas.width / 2, y = canvas.height / 2;
var ballRadius = 10, dx = 2, dy = -2;
var blinkDuration = 60; // Duration in milliseconds
var endBlink = 0;

function drawBall() {
  ctx.beginPath();
  ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();
}

function draw(timeStamp) {
  if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
    endBlink = timeStamp + blinkDuration; // Hit a wall
    dx = -dx;
  }
  if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
    endBlink = timeStamp + blinkDuration;
    dy = -dy;
  }

  // If endBlink > timeStamp, change the color
  ctx.fillStyle = (endBlink > timeStamp ? "#338" : "#114");
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  drawBall();

  x += dx;
  y += dy;
  
  requestAnimationFrame(draw);
}

requestAnimationFrame(draw);

body { margin: 0 }

<canvas id="canvas" width="630" height="190"></canvas>