1

私は2本の線を描きたいです。最初はページを開いてから 3 秒後に開始する必要があります。これは問題ありません。2 行目 (および後で別の行) は、最初の行が終了してから描画を開始する必要があります (または、最初に終了するか、ボタンをクリックすると 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 秒ごとに行をアニメーション化するために呼び出している間隔が 1 つあります。次に、線の描画をアニメーション化する内部間隔があります。

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 に答える