如何在html5画布中逐步绘制线条动画答案

【问题标题】：How to progressively draw line animation in html5 canvas如何在html5画布中逐步绘制线条动画
【发布时间】：2014-10-18 06:49:48
【问题描述】：

我正在使用画布。我已经画了一组线。这是我的示例代码

for(var i = 0 ; i< points.length; i++){
var point = points[i];

setInterval(function() {
  ctx.strokeStyle = "black";
  ctx.moveTo(point.startX, point.startY);
  ctx.lineTo(point.startX1, point.startY1); 
  ctx.stroke();
 }, 500);
}

此代码每 0.5 秒绘制一次线。但我希望逐步对其进行动画处理。所以请帮助逐步画线。

此屏幕截图显示了输出。我在 SVG 中实现了这一点。但我在画布上也需要同样的东西。

【问题讨论】：

语句末尾的数字 500 表示函数重复的时间间隔（以毫秒为单位）。尝试输入一个较小的数字（甚至只有 1 个），这可能会奏效。
是的@NDraskovic。但是动画的持续时间减少了。 :(所以如果可能的话，建议其他方式
您可能需要对动画的参数进行试验，我的建议是减少时间间隔，但也要减少在该间隔内绘制的线的长度。这样，您将有效地延长动画。从您发布的代码中，我认为这意味着在 points[] 数组中添加更多点
看看这个html5canvastutorials.com/advanced/…，它的功能与您需要的类似（第 30-51 行），您只需省略清除先前状态的部分
感谢 NDraskovic 希望这会有所帮助..

标签： jquery html animation canvas

【解决方案1】：

<!DOCTYPE html>
<html>
    <head>
        <title>Parent selector</title>
    </head>
<body>
<canvas height="300px" width="500px" id="canva"></canvas>
<script>
    var canva = document.getElementById('canva'),
        ctx = canva.getContext('2d');

    var Point = function (x, y) {
        this.startX = x;
        this.startY = y;
    };
    var points = [new Point(1, 2), 
                  new Point(10, 20), 
                  new Point(30, 30), 
                  new Point(40, 80), 
                  new Point(100, 100), 
                  new Point(120, 100)];

    //goto first point
    ctx.strokeStyle = "black";
    ctx.moveTo(points[0].startX, points[0].startY);

    var counter = 1,
    inter = setInterval(function() {
        //create interval, it will
        //iterate over pointes and when counter > length
        //will destroy itself
        var point = points[counter++];
        ctx.lineTo(point.startX, point.startY); 
        ctx.stroke();
        if (counter >= points.length) {
           clearInterval(inter);
        }
        console.log(counter);
    }, 500);
    ctx.stroke();
</script>
    </body>
</html>

【讨论】：

嗨对不起.. :(这就是我的代码所做的。画一条线，500ms延迟后画另一条线等等..但我需要像屏幕截图一样渐进式。你能建议如果可能的话还有其他方法吗？？
见更新。没有背景和其他功能。但它逐渐绘制图表。请提供更详细的问题。
是的。正如我所提到的，它是使用 jquery 的 animate 方法在 SVG 中生成的。除了setInterval之外，我需要任何其他带来这个o / p的方法。仅供参考，背景不重要。我只说线路。谢谢。

【解决方案2】：

async function aWaitF(ctx, index, ary) {

        if (!ary) return;

        for (let i = 0; i < ary.length; i++) {

            let cur = {};
            cur.x = name_pos[i].x;  // x position
            cur.val = ary[i].Y - 0;
            cur.y = y_h - y_h * ((ary[i].Y - 0) / series_max); // y position
            let prev = {};
            let next = {};
            let font_pos = null;

            if (i === 0) {

            } else {
                prev.val = ary[i - 1].Y - 0;
                prev.x = name_pos[i - 1].x;
                prev.y = t + y_h - y_h * ((ary[i - 1].Y - 0) / series_max);
                next.val = ary[i + 1] ? ary[i + 1].Y - 0 : 0;
                ctx.lineWidth = 0.5;

                **await orderRender();**

                function orderRender() {
                    return new Promise(resolve => {
                        let w = cur.x - prev.x;
                        let h = cur.y - prev.y;
                        **let rad = Math.atan2(h, w);** 

                        let x = cur.x > prev.x ? prev.x : cur.x;
                        let y = cur.y > prev.y ? prev.y : cur.y;
                        **let imgData = ctx.getImageData(x, y, w, h);**


                        let timer = requestAnimFrame(drawLine);
                        let num = 0;

                        function drawLine() {
                            **ctx.putImageData(imgData, x, y);**
                            ctx.beginPath();
                            ctx.moveTo(prev.x, prev.y);
                            let newX = prev.x + num;
                            let newH = Math.tan(rad) * num;
                            let newY = prev.y + newH;
                            // num += (ary.length - i) * 10;
                            num += 5;

                            ctx.lineTo(newX, newY);
                            ctx.stroke();
                            timer = requestAnimFrame(drawLine);
                            if (num >= w) {
                                ctx.beginPath();
                                ctx.moveTo(prev.x, prev.y);
                                ctx.lineTo(cur.x, cur.y);
                                ctx.stroke();
                                window.cancelAnimationFrame(timer);
                                resolve();
                            }
                        }
                    });
                }
            }
        }
    }

【讨论】：