html 就是一个 canvas 标签,下面是 js 进行绘图,目标是每 2 秒画出一个同心圆,画 20 次,但是现在等待 2 秒后,全部同心圆将一同出现,我不太明白这应该怎么解决,我也查了闭包,也如下试了,还是不行,可能是我理解闭包不到位,希望有人可以修改一下代码,顺便解释一下我这样不行的原因
var canvas = document.getElementById("canvas");
canvas.width = 1024;
canvas.height = 768;
var context = canvas.getContext('2d');
//循环画同心圆
for (i = 0; i < 200; i += 10) {
(function(j) {
var repeat = "drawCircle(" + j + ")";
console.log(j);
setTimeout(repeat, 2000);
})(i)
}
//画圆函数
function drawCircle(r) {
context.beginPath();
context.lineWidth = 5;
context.arc(300, 300, r, 0, 2 * Math.PI, false);
context.stroke();
}
1
470326964 2018-01-06 22:05:59 +08:00
//循环画同心圆
for (var i = 0; i < 10; i += 1) { (function(j) { setTimeout(() => { drawCircle(j * 20); }, 1000 * j); })(i); } 不谢 |
3
Sparetire 2018-01-06 23:24:53 +08:00 1
理论上 1000 * j 这个操作可能存在整型溢出...
所以有 async/await 的话 function sleep(time) { return new Promise(rs => setTimeout(rs, time)); } async function draw() { for (i = 0; i < 200; i += 10) { drawCircle(i); await sleep(2000); } } draw(); 没有的话 function draw(drawCircle, r, m, n, steps, interval) { if (m < n) { drawCircle(r); setTimeout(() => draw(drawCircle, r + steps, m + steps, n, steps, interval), interval); } } draw(drawCircle, 0, 0, 200, 10, 2000); |
5
bramblex 2018-01-07 11:38:45 +08:00
你先查一下 setInterval 的用法吧……
|