鍍金池/ 問答/HTML/ js， for 循環(huán)，每隔幾秒畫一個大一點的同心圓不成功?

js， for 循環(huán)，每隔幾秒畫一個大一點的同心圓不成功?

html 就是一個 canvas 標(biāo)簽，下面是 js 進行繪圖，目標(biāo)是每 2 秒畫出一個同心圓，畫 20 次，但是現(xiàn)在等待 2 秒后，全部同心圓將一同出現(xiàn)，我不太明白這應(yīng)該怎么解決，我也查了閉包，也如下試了，還是不行，可能是我理解閉包不到位，希望有人可以修改一下代碼，順便解釋一下我這樣不行的原因

var canvas = document.getElementById("canvas");
    canvas.width = 1024;
    canvas.height = 768;
var context = canvas.getContext('2d');

//循環(huán)畫同心圓
for (i = 0; i < 200; i += 10) {
    (function(j) {
        var repeat = "drawCircle(" + j + ")";
        console.log(j);
        setTimeout(repeat, 2000);
    })(i)

}
//畫圓函數(shù)
function drawCircle(r) {
    context.beginPath();
    context.lineWidth = 5;
    context.arc(300, 300, r, 0, 2 * Math.PI, false);
    context.stroke();
}
回答
編輯回答
真難過
var canvas = document.getElementById("canvas");
    canvas.width = 1024;
    canvas.height = 768;
var context = canvas.getContext('2d');

//循環(huán)畫同心圓
for (i = 0; i < 200; i += 10) {
    (function(j) {
        var repeat = "drawCircle(" + j + ")";
        console.log(j);
        // setTimeout的時間應(yīng)該是一個遞增的值0，2s，4s，6s...
        setTimeout(repeat, 2000 * (i / 10)); 
    })(i)
}
//畫圓函數(shù)
function drawCircle(r) {
    context.beginPath();
    context.lineWidth = 5;
    context.arc(300, 300, r, 0, 2 * Math.PI, false);
    context.stroke();
}
2017年7月31日 21:13