Javascript 设置超时以延迟画布上的更改_Javascript_Html_Html5 Canvas

Javascript 设置超时以延迟画布上的更改

javascript html html5-canvas

Javascript 设置超时以延迟画布上的更改,javascript,html,html5-canvas,Javascript,Html,Html5 Canvas,当按下右按钮时，herocolor变为绿色（这已经起作用了），但我添加了一个设置超时，以便在1秒后（当按钮仍被按下时）herocolor将变为蓝色（这不起作用）。当按钮被释放时，它确实会像预期的那样变回红色我的目标是使颜色每1秒在绿色和蓝色之间来回切换警报会正确延迟，并将herocolor正确更新为蓝色，但方形不会变为蓝色。我完全搞不懂为什么这不起作用 loop = function() { var herocolor = "#ff0000"; if (controller.rig

当按下右按钮时，

herocolor

变为绿色（这已经起作用了），但我添加了一个设置超时，以便在1秒后（当按钮仍被按下时）

herocolor

将变为蓝色（这不起作用）。当按钮被释放时，它确实会像预期的那样变回红色

我的目标是使颜色每1秒在绿色和蓝色之间来回切换

警报会正确延迟，并将

herocolor

正确更新为蓝色，但方形不会变为蓝色。我完全搞不懂为什么这不起作用

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);
};

完整代码

<!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>


* {
框大小：边框框；
保证金：0；
填充：0；
}
html，正文{
身高：100%；
宽度：100%；
}
身体{
对齐内容：周围的空间；
背景色：#202830；
颜色：#ffffff；
显示：网格；
证明内容：中心；
}
帆布{
背景色：#ffffff；
}
变量上下文、控制器、英雄、循环；
context=document.querySelector（“canvas”）.getContext（“2d”）；
context.canvas.height=400；
context.canvas.width=800；
英雄={
身高：40，
宽度：40，
x:144，
y:140，
};
控制器={
右：错，
上：错，
keyListener:函数（事件）{
var key_state=（event.type=“keydown”）？true:false；
开关（event.keyCode）{
案例39：
controller.right=按键状态；
打破
}
}
};
循环=函数（）{
var herocolor=“#ff0000”；
如果（controller.right==true）{
herocolor=“#00ff00”；
setTimeout（函数（）{
herocolor=“#0000ff”；
警报（herocolor）；
}, 1000);
}
context.fillStyle=“#202020”；
fillRect（0,0800400）；
context.fillStyle=herocolor；
context.beginPath（）；
context.rect（hero.x，hero.y，hero.width，hero.height）；
context.fill（）；
window.requestAnimationFrame（循环）；
};
window.addEventListener（“keydown”，controller.keyListener）
window.addEventListener（“keyup”，controller.keyListener）；
window.requestAnimationFrame（循环）；

请参考下面的示例代码，这里我使用画布创建一个简单的行，并在3秒后使用

设置超时显示：

var canvas=$（“#myCanvas”）[0]；
var c=canvas.getContext（“2d”）；
风险价值金额=0；
var startX=164；
var-startY=120；
var endX=1094；
var-endY=120；
setTimeout（函数（）{
var interval=setInterval（函数（）{
金额+=0.01；//更改为更改持续时间
如果（金额>1）{
金额=1；
间隔时间；
}
c、 clearRect（0，0，canvas.width，canvas.height）；
c、 strokeStyle=“黑色”；
c、 线宽=1；
c、 strokeStyle=“#707070”；
c、 移动到（startX、startY）；
//lerp:a+（b-a）*f
c、 行至（startX+（endX-startX）*金额，startY+（endY-startY）*金额）；
c、 笔划（）；
}, 0);
}, 3000);
您的循环1。将颜色设置为绿色2。绘制一个绿色矩形3。延迟1秒后将herocolor设置为蓝色。这大约每秒发生60次。您需要将herocolor声明移到循环函数之外。以下是我的想法：（基本思想是计算右键按下的时间，并基于此确定颜色；这需要将颜色存储在全局变量中）我猜这最终是关于为英雄设置行走循环的动画？