javascript - Javascript Canvas

<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）。

最佳答案

你必须抚摸你的台词！
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>