Question

按下鼠标右键时，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>

Answer 1

请参考以下示例代码，在这里，我使用画布创建一条简单的行，并使用setTimeout在3秒钟后显示：

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 个答案: