Javascript Canvas

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()何を描画するかを記憶してから、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

私はちょうどあなたが2回

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

が

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

に変換することができ、同様の動作をしていることを言いたかったの@Dwadelfriが言うのと同様に、

この方法では読みやすく、品質が向上します