Html5 canvas，延遲繪製2行

Question

我想畫一條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); 

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

讓我知道如果這不能回答你的問題。謝謝。