setTimeout 延迟画布上的更改答案

【问题标题】：setTimeout to delay change on canvassetTimeout 延迟画布上的更改
【发布时间】：2019-12-23 23:41:47
【问题描述】：

当按住右键时，herocolor 变为绿色（这已经有效），但我添加了一个 setTimeout 以便在 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>

【问题讨论】：

您的循环 1. 将 herocolor 设置为绿色 2. 绘制一个绿色矩形 3. 在延迟 1 秒后将 herocolor 设置为蓝色。这大约每秒发生 60 次。您需要将 herocolor 声明移到循环函数之外。
这是我的看法：jsfiddle.net/khrismuc/12an643t（基本思想是计算按住右键的时间并根据它确定颜色；这需要将颜色存储在全局变量中）我我猜这最终是关于为英雄制作步行循环的动画？

标签： javascript html html5-canvas

【解决方案1】：

请参考下面的示例代码，这里我使用画布创建一个简单的线，并在 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>

【讨论】：