Как заставить объект мигать один раз за 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 и на основе этого образца , вы можете использовать предоставленный параметр временной метки и, когда вы ударяете стену, увеличивать таймер, когда мигание закончится. Затем используйте этот таймер для определения цвета фона.

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>