1

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

有这行的代码，但我不知道该怎么做，我只能同时制作 2 行。

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

1 回答 1

3

我不确定这是否正是你所追求的，但我拿走了你写的一些内容并对其进行了解释。

这是一个带有结果的 jsFiddle http://jsfiddle.net/GZSJp/

本质上，您有一个间隔，每 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);

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

于 2013-06-27T12:44:16.290 回答