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);

这样更易读，质量更好