Javascript畫布

Question

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #d3d3d3;">   </canvas>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var currentx;
var currenty;
currentx=0;
currenty=200;

MoveRight();

我有應該更新canvas元素和全局變量的函數，但是它們不起作用。 例如我的MoveRight函數：

function MoveRight()
{

ctx.moveTo(currentx,currenty);
ctx.lineTo(currentx+40,currenty);
currentx=currentx+40;

}

我希望我的MoveRight函數每次被調用時繪制一條水平線，並更新全局變量（currentx和currenty）。

Answer 1

你必須撫摸你的台詞！

beginPath()將開始並beginPath()要繪制的內容，然后使用stroke()進行繪制。 然后，您可以使用beginPath()清除筆划存儲器，以便不再繪制同一行。

 var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var currentx; var currenty; currentx=0; currenty=200; MoveRight(); function MoveRight() { ctx.beginPath(); ctx.moveTo(currentx,currenty); ctx.lineTo(currentx+40,currenty); currentx=currentx+40; ctx.stroke(); } 

 <canvas id="myCanvas" width="200" height="200" style="border:1px solid #d3d3d3;"></canvas> <button onclick="MoveRight();">Move right!</button> 

Answer 2

就像@Dwadelfri所說的那樣，我只想說您兩次執行相同的操作

ctx.lineTo(currentx+40, currenty);
currentx = currentx + 40;

可以轉換成

currentx += 40;
ctx.lineTo(currentx, currenty);

這樣更易讀，質量更好