向不同方向移动矩形

Question

我需要这方面的帮助，需要向不同方向移动矩形

矩形的最大宽度 and/or 高度为 90 像素
矩形的最小宽度 and/or 高度为 45 像素
生成点 0 和 3 的 X 值为 canvas 宽度
的 ¼ 生成点 1 和 2 的 X 值为 canvas 宽度
的 ¾ 生成点 0 和 1 的 Y 值为 canvas 高度
的 ¼ 生成点 2 和 3 的 Y 值为 canvas 高度

的 ¾

window.onload = function() {
  var canvas = document.getElementById("canvasId")
  var ctx = canvas.getContext("2d")
  var width = canvas.width = window.innerWidth
  var height = canvas.height = window.innerHeight

  var particle = {
    x: 200,
    y: 150,
    r: 90,

    create: function(x, y, r, dx, dy) {
      var obj = Object.create(this)
      obj.x = x
      obj.y = y
      obj.r = r
      obj.dx = dx
      obj.dy = dy
      obj.c = getRandomColor(),
        obj.g = 0.4
      return obj
    },

    move: function() {
      this.x -= this.dx
      this.y -= this.dy

      if (this.x + this.r > width || this.x - this.r < 0) {
        this.dx = this.dx * -1
      }
      if (this.y + this.r > height || this.y - this.r < 0) {
        this.dy = this.dy * -1
      }
    }
  }

  function randomSign() {
    return Math.random() < 0.5 ? -1 : 1
  }

  var p = []
  const numParticles = 1

  for (let i = 0; i < numParticles; i++) {
    p[i] = particle.create(
      width / 2,
      height / 2,
      Math.random() * 25 + 5,
      Math.random() * 15 * 2,
      Math.random() * 15 * -1
    )
  }

  update();

  function random(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }

  function update() {
    ctx.clearRect(0, 0, width, height)

    for (let i = 0; i < numParticles; i++) {
      ctx.beginPath()
      //  arc(x, y, radius, startAngle, endAngle, clockwise)
      ctx.rect(p[i].x - 220, p[i].y, p[i].r * 9, 200, 150)
      ctx.rect(p[i].x - 220, p[i].y - 500, p[i].r * 6, 200, 150)
      ctx.rect(p[i].x + 150, p[i].y - 500, p[i].r * 6, 200, 150)
      ctx.rect(p[i].x + 150, p[i].y, p[i].r * 6, 200, 150)

      ctx.fillStyle = p[i].c
      ctx.fill()
      ctx.stroke()
      ctx.closePath()
      p[i].move()
    }
    requestAnimationFrame(update);
  }

  function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }
}

<canvas id="canvasId"></canvas>

Answer 1

我简化了很多你的代码，只关注不同方向的移动对象。
在您的代码中，您有 p 数组，对于每个矩形，您绘制了四个矩形，我不确定您为什么要这样做，看来您应该只绘制一个，也许您可以更好地解释您要尝试的内容完成。

这是向不同方向移动对象的起点

var canvas = document.getElementById("canvasId")
var ctx = canvas.getContext("2d")

class particle {
  constructor(x, y, dx, dy) {
    this.x = x
    this.y = y
    this.dx = dx
    this.dy = dy
  }

  move() {
    this.x -= this.dx
    this.y -= this.dy

    if (this.x + 20 > canvas.width || this.x < 0) this.dx *= -1
    if (this.y + 20 > canvas.height || this.y < 0) this.dy *= -1
    ctx.beginPath()
    ctx.rect(this.x, this.y, 20, 20)
    ctx.fill()
  }
}

var p = []
p.push(new particle(10, 10, -1, 1.5))
p.push(new particle(50, 50, 1, 2))
p.push(new particle(80, 80, 2, -1))

function update() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  p.forEach((e) => { e.move() })
  requestAnimationFrame(update);
}
update();

<canvas id="canvasId" width=160 height=160></canvas>

向不同方向移动矩形

Move rectangles in different directions

html

javascript

html5-canvas