javascript - 我的画布循环有问题

Question

我正在尝试制作一个简单的图表，该图表在一直绘制到画布宽度后回到开头。但由于某种原因，在我重置 x 值后它不会迭代。我在哪里做错事？提前谢谢；

http://fun.qoobx.com/canvas/

只是为了描述我的逻辑：我观察 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>

Answer 1

似乎您正在重置newX值而不是i值，根据您的代码也必须重置该值。