HTML-帆布 - JavaScript的動畫效果/繪圖

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>

來源

2015-10-08 Eduard

你需要說明這一點，因爲我不知道你的意思。 – MortenMoulder

如果我在「ctx.lineTo（x2，y2）;」處添加149到x2和y2，它會從中心向右下方移動，但它會在每個方向上繼續另一個149 px。 @Snorlax，請檢查jsfiddle鏈接：http://jsfiddle.net/geduardcatalin/6Lg6ymt3/ – Eduard

變量在線路2 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(); 
}

來源

2015-10-08 20:51:45

非常感謝！ – Eduard

注意，現在你正在畫永遠。你應該考慮有一個標誌來檢查何時停止。 –

是的，我知道！再次感謝你！：D – Eduard

這是因爲你的l變量在299停止，但k繼續下去。 k會從0到-299（而不是0到299），所以要解決它，你想改變它的條件：

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

而且有你在你的評論中提及了正確的ctx.lineTo(x2 + 149, y2 + 149);。

來源

2015-10-08 21:00:35

謝謝你的回答。是的，現在它是有道理的！ – Eduard

HTML-帆布 - JavaScript的動畫效果/繪圖

回答

相關問題