javascript 使用 for 循环和 setInterval 动画画布
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15071086/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Animate Canvas using for loop and setInterval
提问by shibalink
I'm trying to animate canvas using for loop and setInterval, but no luck so far... Here's what I have in my code:
我正在尝试使用 for 循环和 setInterval 为画布设置动画，但到目前为止没有运气......这是我的代码中的内容：
//loop function
function loop(){
var dynamic = 0;
var v = 10;
var x, y;
for (dynamic = 0; dynamic < v; dynamic++) {
x = dynamic * 1;
y = dynamic * 1;
c.clearRect(0, 0, 350, 350);
c.fillStyle = '#87CEEB';
c.beginPath();
c.arc(x, y, 10, 0, Math.PI*2, false);
c.fill();
}
}
setInterval(loop, 20);
Thanks so much in advance!
非常感谢！
回答by lostyzd
Maybe you should move the dynamicvariable to the outside? You seem to draw the circle at the same point every loop.
也许你应该把dynamic变量移到外面？你似乎在每个loop.
var dynamic = 0;
//loop function
function loop(){
var v = 10;
var x, y;
x = dynamic * 1;
y = dynamic * 1;
c.clearRect(0,0, 350,350);
c.fillStyle = '#87CEEB';
c.beginPath();
c.arc(x,y, 10, 0, Math.PI*2, false);
c.fill();
++dynamic;
}
setInterval(loop,20);
回答by markE
As said before: move your dynamic out of the animation loop and change dynamic inside the loop.
如前所述：将您的动态移出动画循环并在循环内更改动态。
A summary of animation is this:
动画总结如下：
Set your starting variables (like dynamic) outsideyour for loop
Inside the animation loop() you want to animate the canvas by 1 move (not many moves), like this:
+ Increment your dynamic variable to induce motion. + Set your x & y to reflect the changes to dynamic. + Clear the canvas to prepare for this animation frame + Draw stuff!After the loop, start the animation with setInterval()
If you animation runs off the screen, you might as well turn it off!
在 for 循环之外设置起始变量（如动态）
在动画 loop() 中，您希望通过 1 个移动（移动不多）为画布设置动画，如下所示：
+ Increment your dynamic variable to induce motion. + Set your x & y to reflect the changes to dynamic. + Clear the canvas to prepare for this animation frame + Draw stuff!循环后，用 setInterval() 开始动画
如果你的动画跑出屏幕，你不妨把它关掉！
Here is some code and a Fiddle: http://jsfiddle.net/m1erickson/fFfRS/
这是一些代码和小提琴：http: //jsfiddle.net/m1erickson/fFfRS/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var c=canvas.getContext("2d");
// set the dynamic outside the loop
var dynamic = 10;
var x;
var y;
//loop function
function loop(){
// change dynamic
dynamic=dynamic*1.1;
x = dynamic;
y = dynamic*1.2;
// stop the the animation if it runs out-of-canvas
if (x>canvas.width || y>canvas.height){
c.clearRect(0,0,canvas.width,canvas.height);
clearInterval(myTimer);
alert("animation done!");
}
// clear the canvas for this loop's animation
c.clearRect(0,0,canvas.width,canvas.height);
c.fillStyle = '#87CEEB';
// draw
c.beginPath();
c.arc(x,y, 10, 0, Math.PI*2, false);
c.fill();
}
var myTimer=setInterval(loop,20);
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=400 height=400></canvas>
</body>
</html>
