javascript - setTimeout 延迟画布上的更改
问题描述
当按住右侧按钮时,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>
解决方案
请参考下面的示例代码,这里我使用画布创建一个简单的线,并在 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>
推荐阅读
- php - 与数据库的连接在本地主机上工作,但不在线
- c - 如何在数组中逐字节读取
- xamarin.forms - 在使用最新版本的 Xamarin Forms 进行的开发中替换 Xamarin.Forms.Theme.Dark
- scala - spark-submit with scala package ++ operator 返回 java.lang.NoSuchMethodError: scala.Predef$.refArrayOps
- ansible - ansible junos UnicodeDecodeError: 'utf8' codec can't decode byte 0xff in position 0:
- tensorflow - 如何在没有大量标记数据的情况下训练神经网络
- sql - 2 个特定 Google Analytics(分析)页面点击之间的 Bigquery 时间
- .net - 正在重播 ID 为 [id] 的 SAML 断言
- html - iOS - 固定引导导航栏内容完全透明
- apache-spark - 在分区 hive 表中插入 spark Dataframe 而不会覆盖数据