1

キャンバスの幅いっぱいまで描いたら最初に戻るような簡単なグラフを作ろうとしています。しかし、何らかの理由で、x の値をリセットした後、反復処理が行われません。私はどこで間違ったことをしていますか? 前もってthnx;

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>
4

1 に答える 1

2

It seems you're resetting the newX value but not the i value, which according to your code has to be reset as well.

于 2013-06-12T09:08:46.277 に答える