gpt4 book ai didi

javascript - 使用 Canvas 的简单 html 5 javascript 动画的超时函数

转载 作者:行者123 更新时间:2023-11-30 12:36:19 25 4
gpt4 key购买 nike

我一直在尝试使用 html 5 和 javascript 制作这个简单的动画:

http://www.developphp.com/view.php?tid=1262

代码如下:

<!-- Lesson by Adam Khoury @ www.developphp.com -->
<!-- Watch the video to get code explanation line by line -->
<!-- http://www.youtube.com/watch?v=hUCT4b4wa-8 -->
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
canvas{border:#666 1px solid;}
</style>
<script type="text/javascript">
function draw(x,y){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.save();
ctx.clearRect(0,0,550,400);
ctx.fillStyle = "rgba(0,200,0,1)";
ctx.fillRect (x, y, 50, 50);
ctx.restore();
x += 1;
var loopTimer = setTimeout('draw('+x+','+y+')',100);
}
</script>
</head>
<body>
<button onclick="draw(0,0)">Draw</button>
<canvas id="canvas" width="550" height="400"></canvas>
</body>
</html>

代码中只有一件事我不明白:在 setTimeout'+' 的方法是什么前后xy做什么以及为什么使用引号括起 +x++y+?

最佳答案

'draw('+x+','+y+')' 这只是一个字符串连接,您将通过打印该字符串来理解这一点。下面的 fiddle 解释了更多。

http://jsfiddle.net/zebqqcee/

关于javascript - 使用 Canvas 的简单 html 5 javascript 动画的超时函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25970419/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com