Question

我必须从左到右以及从右到左创建一个移动矩形。

我想在矩形每经过20个像素后将矩形的颜色更改为随机颜色。当矩形在右侧时，其大小将更改为100px，而在左侧时，其大小将返回至50px。

现在我有：

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    x = 0,
    last = performance.now();
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
function draw(timestamp) {
  requestAnimationFrame(draw);

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.rect(x, 50, 50, 50);
  ctx.fillStyle = "#ffffff";
  ctx.fill();

  x += (timestamp - last) / 10;
  last = timestamp;
}
requestAnimationFrame(draw);

感谢您的提前解答！

Answer 1

您需要做一些事情。首先，您需要为每件可能发生变化的事物创建变量。这包括框的size，框的color和框的dir部分：

var canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d'),
  x = 0,
  size = 50,
  dir = 1,
  boxColor = "#ffffff",
  last = performance.now();

变量dir是1，这意味着它将采用框的当前方向并乘以1。如果要更改框的方向，我们需要从x中减去。这意味着我们需要在每次框碰到右墙时将dir更改为-1，并在框碰到左墙时将其更改回1。为此，我们可以添加一个名为bounce的辅助函数，该函数检查框的宽度+框的大小是否超过了画布的宽度。如果是这样，我们知道盒子已经超出了画布容器的右侧。因此，我们可以将盒子的方向更改为-1。我们还可以将盒子的位置重新定位在墙的外面，以防盒子在移动时能够夹入墙中。我们可以应用相同的逻辑来检查框是否超过画布的左边缘。在此检查过程中，我们还可以更改框的size，使其在碰到右壁时增大，而在碰到左壁时收缩：

function bounce() {
    if(x+size > canvas.width) { // if right edge passes the widtth of the canvas, change the dir
    dir *= -1;
    size = 100;;
    x = canvas.width-size; // move the box outside of the wall (boundary)
  } else if(x < 0) {
    dir *= -1;
    size = 50;
    x = 0;
  }
}

因此，我们还必须将x公式中的更改更改为：

x += dir*(timestamp - last) / 10;

最后，我们需要添加一种方法来更改盒子的颜色。这可以通过对%位置取模（x）来完成。如果x % 20等于0，我们知道盒子位于x的位置，该位置是20的倍数，因此我们更改其颜色。但是，由于x的位置不会每次都1改变，因此在执行此检查之前，我们需要四舍五入x。此外，我们需要留出一点余地，因为我们可能会跳过20 ^th像素，因此不会得到20的倍数，因此，我们可以使用{{ 1}}作为我们的支票。（注意：这不是完美的检查，但这是我目前能提出的最好的方法：/）：

<=1

请参见以下示例：

function color() {
    if(Math.round(x) % 20 <= 1 ) { // if the x divide 20 gives a remainder of 0
    var r = Math.floor(Math.random() * 255);
    var g = Math.floor(Math.random() * 255);
    var b = Math.floor(Math.random() * 255);
    boxColor = "rgb(" +r +", " +g +", " +b +")";
  } else {
    console.log(Math.round(Math.abs(x)) % 20);
  }
}

var canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d'),
  x = 0,
  size = 50,
  dir = 1,
  boxColor = "#ffffff",
  last = performance.now();
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function draw(timestamp) {
  bounce();
  color();
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.fillStyle = boxColor;
  ctx.rect(x, canvas.height / 2 - size / 2, size, size);
  ctx.fill();

  x += dir * (timestamp - last) / 10;
  last = timestamp;
  requestAnimationFrame(draw);
}

function bounce() {
  if (x + size > canvas.width) { // if right edge passes the widtth of the canvas, change the dir
    dir *= -1;
    size = 100;
    x = canvas.width - size; // move the box outside of the wall (boundary)
  } else if (x < 0) {
    dir *= -1;
    size = 50;
    x = 0;
  }
}

function color() {
  if (Math.round(x) % 20 <= 1) { // if the x divide 20 gives a remainder of 0
    var r = Math.floor(Math.random() * 255);
    var g = Math.floor(Math.random() * 255);
    var b = Math.floor(Math.random() * 255);
    boxColor = "rgb(" + r + ", " + g + ", " + b + ")";
  }
}

requestAnimationFrame(draw);

body {
  margin: 0;
}

从左到右-从右到左移动画布，更改颜色和大小

1 个答案: