HTML畫布-JavaScript動畫/繪圖

Question

我有這個 ：

http://jsfiddle.net/geduardcatalin/6Lg6ymt3/

如何使第二條線從中心開始並在左下角停止，就像第一條線停在我想要的位置（在中心）一樣？

 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var canvasWidth = canvas.width; var canvasHeight = canvas.height; var i = 0; var j = 0; var k = 0; var l = 0; function drawLine1() { i = i + 1; j = j + 1; x1 = i; y1 = j; if (i >= 149) { i = 149; } if (j >= 149) { j = 149; } ctx.beginPath(); ctx.strokeStyle = "#000000"; ctx.lineWidth = 1; ctx.moveTo(0, 0); ctx.lineTo(x1, y1); ctx.stroke(); } function drawLine2() { k = k - 1; l = l + 1; x2 = k; y2 = l; if (k >= 299) { k = 299; } if (l >= 299) { l = 299; } ctx.beginPath(); ctx.strokeStyle = "#000000"; ctx.lineWidth = 1; ctx.moveTo(150, 150); ctx.lineTo(x2, y2); ctx.stroke(); } function drawLines() { ctx.clearRect(0, 0, canvasWidth, canvasHeight); drawLine1(); drawLine2(); //setTimeout(drawLine2, 0000); } setInterval(drawLines, 40); 

 * { margin: 0; padding: 0; } html { background-color: #555555; } #wrapper { width: 300px; height: 300px; margin: 70px auto; border: 1px solid red; } 

 <div id="wrapper"> <canvas id="myCanvas" height="300px" width="300px"></canvas> <p id="demo"></p> </div> 

Answer 1

Line2中的變量k和l都應從150開始，並將draw Line2()更改為此：

這是更新的JSFiddle 。

function drawLine2(){
    k = k - 1;
    l = l + 1;
    x2 = k;
    y2 = l;

    if ( k <= 0 ){
        k = 0;
    }
    if ( l >= 299 ){
        l = 299;
    }

    ctx.beginPath();
    ctx.strokeStyle = "#000000";
    ctx.lineWidth = 1;
    ctx.moveTo(150, 150);
    ctx.lineTo(x2, y2);
    ctx.stroke();
}

Answer 2

這是因為您的l變量在299處停止，但k永遠持續下去。 k從0到-299 （而不是0到299 ），因此要對其進行修復，您需要將其條件更改為：

if ( k <= -299 ){
    k = -299;
}

並具有正確的ctx.lineTo(x2 + 149, y2 + 149); 您在評論中提到過。