Question

我试图制作一个简单的图形，在绘制到画布宽度后一直回到开头。但由于某些原因，在重置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>

Answer 1

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

我的画布循环有问题

1 个答案: