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

我对画布非常陌生，我只是尝试构建一个基本函数，这样一个矩形可以从左向右移动。看起来我只是不明白其中的逻辑

这就是我到目前为止所做的：

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

为什么代码是错误的，移动矩形的正确逻辑是什么

---

任何帮助都将不胜感激

似乎没有将x变量初始化为数字，因此它不会移动。我对你的JSFIDLE做了一点个性化：

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

我将其链接，希望它能有所帮助：

---

似乎您没有将x变量初始化为数字，因此它不会移动。我对你的JSFIDLE做了一点个性化：

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

我将其链接，希望它能有所帮助：

---

它不起作用的原因是您忘记初始化变量x，这意味着无论何时调用draw函数，您都试图以未定义的

x值进行绘制

请参阅此JSFIDLE：

另外，我还建议您使用
requestAnimationFrame
而不是
setInterval
来节省系统资源。看

注意：我更改了x的增加量，以使移动更容易看到。
它不起作用的原因是您忘记初始化变量x，这意味着无论何时调用draw函数，您都试图以
未定义的
x值进行绘制

请参阅此JSFIDLE：

另外，我还建议您使用
requestAnimationFrame
而不是
setInterval
来节省系统资源。看

注意：我更改了x的增加量，以使移动更容易查看。
您的代码有多个问题：


使用透明像素填充画布，这与使用画布的CSS背景色填充效果相同，默认为白色。您需要更改CSS背景色，以便白色矩形可见

对于视觉动画而言，它优于
setInterval（）
，因为它适应浏览器和屏幕的刷新率。使用它提供给回调的时间戳来同步图形

绘制矩形时不需要，因为它已经是闭合形状

您需要将
x
初始化为
Number
，否则在递增时计算结果为'NaN'的是
undefined



var canvas=document.getElementById（'canvas'），
ctx=canvas.getContext（'2d'），
x=0，
last=performance.now（）；
函数绘制（时间戳）{
请求动画帧（绘制）；
clearRect（0，0，canvas.width，canvas.height）；
ctx.beginPath（）；
ctx.rect（x，20，20，20）；
ctx.fillStyle=“#ffffff”；
ctx.fill（）；
x+=（时间戳-最后一次）/10；
last=时间戳；
}
请求动画帧（绘制）
#画布{
背景色：黑色；
}
您的代码存在多个问题：


使用透明像素填充画布，这与使用画布的CSS背景色填充效果相同，默认为白色。您需要更改CSS背景色，以便白色矩形可见

对于视觉动画而言，它优于
setInterval（）
，因为它适应浏览器和屏幕的刷新率。使用它提供给回调的时间戳来同步图形

绘制矩形时不需要，因为它已经是闭合形状

您需要将
x
初始化为
Number
，否则在递增时计算结果为'NaN'的是
undefined



var canvas=document.getElementById（'canvas'），
ctx=canvas.getContext（'2d'），
x=0，
last=performance.now（）；
函数绘制（时间戳）{
请求动画帧（绘制）；
clearRect（0，0，canvas.width，canvas.height）；
ctx.beginPath（）；
ctx.rect（x，20，20，20）；
ctx.fillStyle=“#ffffff”；
ctx.fill（）；
x+=（时间戳-最后一次）/10；
last=时间戳；
}
请求动画帧（绘制）
#画布{
背景色：黑色；
}
您没有调用
draw
。尝试
draw（）
，看看这是否有帮助。此外，您还必须在下面调用它，
var draw=…
，因为您没有使用函数定义，所以它不会被提升。您还应该将此吸盘插入带有一些HTML的代码段中，以便人们可以运行它并更好地帮您。您从未初始化过
x
x=0
@jakehoffmann我已经按照你说的方式更改了代码，但仍然没有用。请在此处检查：按照Ryan的建议初始化
x
，然后它就可以工作了。您没有调用
draw
。尝试
draw（）
，看看这是否有帮助。此外，您还必须在下面调用它，
var draw=…
，因为您没有使用函数定义，所以它不会被提升。您还应该将此吸盘插入带有一些HTML的代码段中，以便人们可以运行它并更好地帮您。您从未初始化过
x
x=0
@jakehoffmann我已经按照你说的方式更改了代码，但仍然没有用。请检查这里：按照Ryan的建议初始化
x
，然后它就可以工作了。谢谢，这对我有帮助。谢谢，这对我有帮助。