Javascript Html5画布，延迟绘制2行

我想画两条线。首先应该在打开页面3秒后启动，这没有问题， 第二行（以及后面的另一行）应该在第一行完成后开始绘制（或者可能在第一行完成后3秒开始绘制，或者单击按钮）

这一行有代码，但我不知道怎么做，我只能在同一时间做两行

var amount = 0;
var amountt=1;
var startX = 0;
var startY = 0;
var endX = 500;
var endY = 300;
var startXx = 0;
var startYy = 0;
var endXx = 500;
var endYy = -300;    

setTimeout(function() {
    var interval = setInterval(function() {
        amount += 0.01; // change to alter duration
        if (amount > 1) {
            amount = 1;
            clearInterval(interval);
        }

        ctx.strokeStyle = "black";
        ctx.lineWidth=1;
        ctx.strokeStyle="#707070";
        ctx.moveTo(startX, startY);
        // lerp : a  + (b - a) * f
        ctx.lineTo(startX + (endX - startX) * amount, startY + (endY - startY) * amount);
        ctx.stroke();                   

        ctx.strokeStyle = "black";
        ctx.lineWidth=1;
        ctx.strokeStyle="#707070";
        ctx.moveTo(startX, startY);
        // lerp : a  + (b - a) * f
        ctx.lineTo(startXx + (endXx - startXx) * amount, startYy + (endYy - startYy) * amount);
        ctx.stroke();            

    }, 0);

}, 3000);

---

我不确定这是否正是你想要的，但我把你写的一些东西拿了下来，并解释了它

下面是一个包含结果的JSFIDLE

基本上，您有一个间隔，每3秒调用一条线的动画。然后有一个内部间隔，用于设置线条绘制的动画

var idx = -1;
var startx = [0, 500, 100];
var starty = [0, 0, 300];
var endx = [500, 0, 400];
var endy = [300, 500, 300];

var c=document.getElementById("mycanvas");
var ctx=c.getContext("2d");

var drawLinesInterval = setInterval(function() {
    if(idx > startx.length)
        clearInterval(drawLinesInterval);

    var linepercentage = 0;
    idx++; //move onto the next line
    var animateInterval = setInterval(function() {
        linepercentage += 0.01;
        if(linepercentage > 1)
        {
            clearInterval(animateInterval);
        }

        ctx.strokeStyle = "black";
        ctx.lineWidth = 1;
        ctx.strokeStyle = "#707070";
        ctx.moveTo(startx[idx], starty[idx]);
        var tempxend = 0;
        var tempyend = 0;
        if(startx[idx] > endx[idx])
            tempxend = startx[idx] - ((startx[idx]-endx[idx])*linepercentage);
        else
            tempxend = startx[idx] + ((endx[idx]-startx[idx])*linepercentage);
        if(starty[idx] > endy[idx])
            tempyend = starty[idx] - ((starty[idx]-endy[idx])*linepercentage);
        else
            tempyend = starty[idx] + ((endy[idx]-starty[idx])*linepercentage);

        ctx.lineTo(tempxend, tempyend);
        ctx.stroke();
    }, 10);
}, 3000);

---

如果这不能回答你的问题，请告诉我。谢谢。

可能就是这样，我需要输入参数，然后我会看到：）Thx Chris:）一切正常，脚本很好，但我还有一个问题，在4行之后，我想通过坐标ctx.arc（wwx，wwy，pita，katToRadians（0），katToRadians（360），true）做一个圆；然后回去写下一行……谢谢你，艾瑞克。至于圆，我建议你看看下面的JSFIDLE（不是我写的）之类的东西，画圆动画的范围最好由其他问题来回答。祝你好运。