setTimeout 延迟画布上的更改

Question

When the right button is held down the herocolor changes to green (this already works), but I added a setTimeout so that after 1 second (while the button is still being held down) herocolor will become blue (this does not work).当按住右键时， herocolor变为绿色（这已经有效），但我添加了一个 setTimeout 以便在 1 秒后（当按钮仍被按住时） herocolor将变为蓝色（这不起作用）。 When the button is released it does turn back to red as expected.当按钮被释放时，它会按预期变回红色。

My goal is to make the color toggle back and forth between green and blue every 1 second.我的目标是每 1 秒让颜色在绿色和蓝色之间来回切换。

The alert properly delays and properly updates herocolor to blue but the square does not turn blue.警报正确延迟并将herocolor正确更新为蓝色，但方块不会变为蓝色。 I am utterly mystified why this isn't working.我完全不明白为什么这不起作用。

loop = function() {

  var herocolor = "#ff0000";
  if (controller.right == true){
     herocolor = "#00ff00";
    setTimeout(function(){
      herocolor = "#0000ff";
      alert(herocolor);
    }, 1000);
  }

  context.fillStyle = "#202020";
  context.fillRect(0, 0, 800, 400);
  context.fillStyle = herocolor;
  context.beginPath();
  context.rect(hero.x, hero.y, hero.width, hero.height);
  context.fill();

  window.requestAnimationFrame(loop);
};

COMPLETE CODE完整代码

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width">
<style>
* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}
html, body {
  height:100%;
  width:100%;
}
body {
  align-content:space-around;
  background-color:#202830;
  color:#ffffff;
  display:grid;
  justify-content:center;
}
canvas {
  background-color:#ffffff;
}
</style>
</head>
<body>
<canvas></canvas>
<script>
var context, controller, hero, loop;
context = document.querySelector("canvas").getContext("2d");
context.canvas.height = 400;
context.canvas.width = 800;
hero = {
  height:40,
  width:40,
  x:144,
  y:140,
};
controller = {
  right:false,
  up:false,
  keyListener:function(event) {
    var key_state = (event.type == "keydown")?true:false;
    switch(event.keyCode) {
      case 39:
        controller.right = key_state;
      break;
    }
  }
};
loop = function() {

  var herocolor = "#ff0000";
  if (controller.right == true){
     herocolor = "#00ff00";
    setTimeout(function(){
      herocolor = "#0000ff";
      alert(herocolor);
    }, 1000);
  }

  context.fillStyle = "#202020";
  context.fillRect(0, 0, 800, 400);
  context.fillStyle = herocolor;
  context.beginPath();
  context.rect(hero.x, hero.y, hero.width, hero.height);
  context.fill();

  window.requestAnimationFrame(loop);
};
window.addEventListener("keydown", controller.keyListener)
window.addEventListener("keyup", controller.keyListener);
window.requestAnimationFrame(loop);
</script>
</body>

Answer 1

Please take reference from the below sample code, here I am creating a simple line using canvas and displaying after 3 sec using setTimeout :请参考下面的示例代码，在这里我使用画布创建一个简单的行，并在 3 秒后使用setTimeout显示：

 var canvas = $("#myCanvas")[0]; var c = canvas.getContext("2d"); var amount = 0; var startX = 164; var startY = 120; var endX = 1094; var endY = 120; setTimeout(function() { var interval = setInterval(function() { amount += 0.01; // change to alter duration if (amount > 1) { amount = 1; clearInterval(interval); } c.clearRect(0, 0, canvas.width, canvas.height); c.strokeStyle = "black"; c.lineWidth=1; c.strokeStyle="#707070"; c.moveTo(startX, startY); // lerp : a + (b - a) * f c.lineTo(startX + (endX - startX) * amount, startY + (endY - startY) * amount); c.stroke(); }, 0); }, 3000);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <canvas id="myCanvas" width="1250" height="120"></canvas>

setTimeout 延迟画布上的更改

问题描述

1 个解决方案

解决方案1
-1 2019-12-23 14:35:27

setTimeout 延迟画布上的更改

问题描述

1 个解决方案

解决方案1 -1 2019-12-23 14:35:27

解决方案1
-1 2019-12-23 14:35:27