Question

我想画一条2行。首先应该在打开页面后开始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);

Answer 1

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

这是一个结果为http://jsfiddle.net/GZSJp/

的jsFiddle

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

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

Html5画布，延迟绘制2行

1 个答案: