Javascript Canvas无法绘制多条曲线

Question

Here's the JSFiddle: https://jsfiddle.net/y06jberm/1/

I intend to draw 3 randomly generated curves following the example from the second highest answer of this post: how to draw smooth curve through N points using javascript HTML5 canvas?

But the canvas only shows one curve at all time, despite the fact that I looped through the curves, and called .stroke after drawing each curve. The drawCurve function is somehow only called once, but I can't see why it is blocking. Can anyone spot any issue from this code? Thanks a million.

            var curves = [];
            var curX = 0;
            for(var j = 0; j < 3; j++){
                x = [];
                for(var i = 0; i < 100; i++){
                    x.push(i*10);
                    x.push(100-Math.floor(Math.random()*100));
                }
                console.log(x);
                curves.push(x);
            }
            var colors = ["red", "blue", "green"];
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            // console.log(ctx);
            var tension = 1;
            for(var i = 0; i < curves.length; i++){
                ctx.stroke();
                ctx.strokeStyle = colors[i];
                console.log(colors[i]);
                drawCurve(ctx, curves[i]);
            }

            // var inter = setInterval(moveCurve, 20);
            var interval = setInterval(loadCurve, 200);

            function moveCurve(){
                curves[0].splice(0,2);
                for(var i = 0; i < curves[0].length; i+=2){
                    curves[0][i] -= 10;
                }
                curves[0].push(990, Math.floor(Math.random()*100));
                ctx.strokeStyle = colors[0];
                ctx.clearRect(0,0,canvas.width, canvas.height);
                drawCurve(ctx, curves[0]);
            }


            function drawCurve(ctx, ptsa, tension, isClosed, numOfSegments, showPoints) {

                showPoints  = showPoints ? showPoints : false;
                showPoints = true;
                // ctx.stroke();
                ctx.beginPath();

                drawLines(ctx, getCurvePoints(ptsa, tension, isClosed, numOfSegments));
                // drawLines(ctx, ptsa);

                // if (showPoints) {
                //     ctx.stroke();
                //     // ctx.beginPath();
                //     for(var i=0;i<ptsa.length-1;i+=2) 
                //             ctx.rect(ptsa[i] - 2, ptsa[i+1] - 2, 4, 4);
                // }
            }

            function getCurvePoints(pts, tension, isClosed, numOfSegments) {

                // use input value if provided, or use a default value   
                tension = (typeof tension != 'undefined') ? tension : 0.5;
                isClosed = isClosed ? isClosed : false;
                numOfSegments = numOfSegments ? numOfSegments : 16;

                var _pts = [], res = [],    // clone array
                    x, y,           // our x,y coords
                    t1x, t2x, t1y, t2y, // tension vectors
                    c1, c2, c3, c4,     // cardinal points
                    st, t, i;       // steps based on num. of segments

                // clone array so we don't change the original
                _pts = pts.slice(0);

                // The algorithm require a previous and next point to the actual point array.
                // Check if we will draw closed or open curve.
                // If closed, copy end points to beginning and first points to end
                // If open, duplicate first points to befinning, end points to end
                if (isClosed) {
                    _pts.unshift(pts[pts.length - 1]);
                    _pts.unshift(pts[pts.length - 2]);
                    _pts.unshift(pts[pts.length - 1]);
                    _pts.unshift(pts[pts.length - 2]);
                    _pts.push(pts[0]);
                    _pts.push(pts[1]);
                }
                else {
                    _pts.unshift(pts[1]);   //copy 1. point and insert at beginning
                    _pts.unshift(pts[0]);
                    _pts.push(pts[pts.length - 2]); //copy last point and append
                    _pts.push(pts[pts.length - 1]);
                }

                // ok, lets start..

                // 1. loop goes through point array
                // 2. loop goes through each segment between the 2 pts + 1e point before and after
                for (i=2; i < (_pts.length - 4); i+=2) {
                    for (t=0; t <= numOfSegments; t++) {

                        // calc tension vectors
                        t1x = (_pts[i+2] - _pts[i-2]) * tension;
                        t2x = (_pts[i+4] - _pts[i]) * tension;

                        t1y = (_pts[i+3] - _pts[i-1]) * tension;
                        t2y = (_pts[i+5] - _pts[i+1]) * tension;

                        // calc step
                        st = t / numOfSegments;

                        // calc cardinals
                        c1 =   2 * Math.pow(st, 3)  - 3 * Math.pow(st, 2) + 1; 
                        c2 = -(2 * Math.pow(st, 3)) + 3 * Math.pow(st, 2); 
                        c3 =       Math.pow(st, 3)  - 2 * Math.pow(st, 2) + st; 
                        c4 =       Math.pow(st, 3)  -     Math.pow(st, 2);

                        // calc x and y cords with common control vectors
                        x = c1 * _pts[i]    + c2 * _pts[i+2] + c3 * t1x + c4 * t2x;
                        y = c1 * _pts[i+1]  + c2 * _pts[i+3] + c3 * t1y + c4 * t2y;

                        //store points in array
                        res.push(x);
                        res.push(y);

                    }
                }

                return res;
            }

            function drawLines(ctx, pts) {
                ctx.moveTo(pts[0], pts[1]);
                for(i=2;i<pts.length-1;i+=2) ctx.lineTo(pts[i], pts[i+1]);
                ctx.stroke();
                ctx.closePath();
            }

Answer 1

The problem is that you use the variable i as your variable in the loop to draw all your curves. But, then inside getCurvePoints() you use the same variable i as a loop counter again. So, after the first curve has been drawn, i contains a value bigger than the number of curves you had. So, your loop to draw all three curves exits after the first one. To fix it, I changed your curve drawing loop variable to c, so it becomes:

for (var c = 0; c < curves.length; c++) {
        console.log(c);
        ctx.stroke();
        ctx.strokeStyle = colors[c];
        console.log(colors[c]);
        drawCurve(ctx, curves[c]);
        console.log(curves);
        console.log(curves.length);
        console.log(c);
 }

And I also added var to declare i in your loop inside getCurvePoints()

for (var i = 2; i < (_pts.length - 4); i += 2) {

Here's a working demo: https://jsfiddle.net/7mgft8qe/ .