Question

我是画布的新手，我只是想建立一个基本功能，所以矩形可以从左向右移动。似乎我只是不理解逻辑。

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

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/

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

任何帮助将不胜感激！

Answer 1

您的代码有多个问题：

clearRect()使用透明像素填充画布，这与填充画布的CSS背景颜色具有相同的效果，默认情况下为白色。您需要更改CSS背景颜色，以便可以看到白色矩形。
requestAnimationFrame()优于li视觉动画，因为它适应您的浏览器和屏幕的刷新率。使用它为回调提供的时间戳来同步您的图纸。
closePath()，因为它已经是一个封闭的形状。
您需要将parent()初始化为find('.cell-selected').，否则setInterval()会在递增时评估为“NaN”。

Number

undefined

Answer 2

您似乎没有将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/

Answer 3

它不起作用的原因是你忘记了初始化变量x，这意味着每当你调用绘制函数时，你都试图在{{1}绘图} x值。

请参阅此jsfiddle：https://jsfiddle.net/tj7d29fw/4/

在第二个注释中，我还建议您使用undefined而不是requestAnimationFrame来节省系统资源。见https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

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

画布：只需从左向右移动一个矩形

3 个答案: