猿问

js, for 循环,每隔几秒画一个大一点的同心圆不成功?

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();

}


慕妹3242003
浏览 775回答 1
1回答
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答