画布：简单地从左到右移动一个矩形

我对画布很新，我只是想要构建一个基本功能，所以矩形可以从左到右移动。似乎我只是不理解逻辑。画布：简单地从左到右移动一个矩形

这是我到目前为止有：

var canvas = document.getElementById('canvas'), 
    ctx = canvas.getContext('2d'), 
    x; 

function draw() { 
    ctx.beginPath(); 
    ctx.rect(x, 20, 20, 20); 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.fillStyle = "#ffffff"; 
    ctx.fill(); 
    ctx.closePath(); 
    x = x + 20; 
} 

draw(); 

setInterval(draw, 1);

https://jsfiddle.net/tj7d29fw/

这是为什么代码错误，以及如何将移动矩形的正确的逻辑？

任何帮助，将不胜感激！

来源

2017-04-02 Reza Saadati

你是不是叫'draw'。尝试'绘制（）'看看是否有帮助。你也必须在'var draw = ...'下面调用它，因为你没有使用函数定义，所以它不会被挂起。 – jakeehoffmann

你还应该将这个吸盘粘贴到一个带有一些HTML的代码片段中，以便人们可以运行它并帮助你更好。 – jakeehoffmann

您从未初始化过'x'。 'x = 0' – Ryan

你的代码有多种问题：

clearRect()填满了透明像素的画布，它具有与你的画布CSS背景颜色，这是每默认的白色填充的效果相同。你需要改变你的CSS背景颜色，使你的白色矩形变得可见。
requestAnimationFrame()优于setInterval()，因为它可以适应浏览器和屏幕的刷新率，因此适用于视觉动画。使用它提供给您的回调的时间戳来同步您的图纸。
closePath()绘制矩形时不需要，因为它已经是一个封闭的形状。
您需要将x初始化为Number，否则为undefined，在递增时计算为'NaN'。

var canvas = document.getElementById('canvas'), 
 
    ctx = canvas.getContext('2d'), 
 
    x = 0, 
 
    last = performance.now(); 
 

 
function draw(timestamp) { 
 
    requestAnimationFrame(draw); 
 
    
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    ctx.beginPath(); 
 
    ctx.rect(x, 20, 20, 20); 
 
    ctx.fillStyle = "#ffffff"; 
 
    ctx.fill(); 
 
    
 
    x += (timestamp - last)/10; 
 
    last = timestamp; 
 
} 
 
requestAnimationFrame(draw);

#canvas { 
 
    background-color: black; 
 
}

<canvas id='canvas'>

来源

2017-04-02 14:54:17

谢谢，那帮了我。 –

看来你不会初始化你的x变量为一个数字，所以它不会移动。我个性有点您的jsfiddle：

var canvas = document.getElementById('canvas'), 
    ctx = canvas.getContext('2d'), 
    x = 0; 

function draw() { 
    ctx.beginPath(); 
    ctx.rect(x, 20, 20, 20); 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.fillStyle = "#ffffff"; 
    ctx.fill(); 
    ctx.closePath(); 
    x = x + 1.2; 
} 

draw(); 

setInterval(draw, 1);

我链接它希望它可以帮助：

https://jsfiddle.net/tj7d29fw/3/

来源

2017-04-02 14:49:56 FFdeveloper

它不工作的原因是，你忘了初始化变量x，这意味着无论何时调用绘图函数，您都会尝试绘制undefined x值。

看到这个的jsfiddle：https://jsfiddle.net/tj7d29fw/4/

在第二个音符，我也建议你使用的代替setInterval，以节省系统资源。请参阅https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

注意：我更改了x增加的数量，以使移动更容易看清。

来源

2017-04-02 14:52:49