Javascript 我的画布循环有问题吗

我试图制作一个简单的图形，在绘制完画布宽度后，可以回到开始。但由于某种原因，在我重置x值后，它不会迭代上升。我在哪里做错事？ thnx提前

描述一下我的逻辑：我观察X值是否达到画布宽度，然后我只是重置它

下面是脚本：

<script>
    var canvas = document.getElementById('mycanvas');
    var curposY = 0;
    var ctx = canvas.getContext('2d');

    var color1 = '02c4f9';

    var i = 0;
    var oldX = 0,
        oldY = parseInt(Math.random()*(40-30)+30),
        newX = 0,
        newY = parseInt(Math.random()*(40-30)+30);

    if (canvas.getContext){

        function drawContent(initialValue){ 

            ctx.strokeStyle = "#"+color1;           
            ctx.lineWidth = 1;
            ctx.beginPath();
            ctx.moveTo(oldX,oldY);
            ctx.lineTo(newX,newY);
            ctx.stroke();   

            // console.log('draw');
            console.log(newX);

            // console.log(color1);

            oldX = newX;
            oldY = newY;
            newX = i++;
            newY = parseInt(Math.random()*(45-30)+30);

            if( newX >= 200 ){
                newX = 0;
            } 

            setTimeout(drawContent,10);
        }
        drawContent();

    } else {
        alert('You need Safari or Firefox 1.5+ to see this demo.');
    }
</script>

var canvas=document.getElementById（'mycanvas'）；
var-curposY=0；
var ctx=canvas.getContext（'2d'）；
变量color1='02c4f9'；
var i=0；
var oldX=0，
oldY=parseInt（Math.random（）*（40-30）+30），
newX=0，
newY=parseInt（Math.random（）*（40-30）+30）；
if（canvas.getContext）{
函数drawContent（初始值）{
ctx.strokeStyle=“#”+color1；
ctx.lineWidth=1；
ctx.beginPath（）；
ctx.moveTo（oldX，oldY）；
ctx.lineTo（newX，newY）；
ctx.stroke（）；
//console.log（'draw'）；
console.log（newX）；
//console.log（color1）；
oldX=newX；
旧的=新的；
newX=i++；
newY=parseInt（Math.random（）*（45-30）+30）；
如果（newX>=200）{
newX=0；
} 
设置超时（drawContent，10）；
}
drawContent（）；
}否则{
警报（'您需要Safari或Firefox 1.5+才能看到此演示'）；
}

似乎您正在重置

newX

值，但没有重置

i

值，根据您的代码，该值也必须重置。

js中的循环结构在哪里？