為什么我只得到一個矩形？

let canvas, ctx, W, H;
canvas = document.createElement('canvas');
document.body.appendChild(canvas);
ctx = canvas.getContext('2d');
let objArr = [];

const init = () => {
  canvas.width = W = innerWidth;
  canvas.height = H = innerHeight;
  canvas.style.background = '#dedfda';

  for (let i = 0; i <= 5; i  ) {
    let r = (i   1) * 20;
    objArr.push(new Rectangle(W / 2, H / 2, 10, 10, "red", innerWidth / 2, innerHeight / 2, r));
    objArr[0].draw();

  }

  animate();
}

const random = (min = 0, max = 1) => Math.random() * (max - min)   min;

class Rectangle {
  constructor(posX, posY, w, h, color, cx, cy, r) {
    this.posX = posX;
    this.posY = posY;
    this.w = w;
    this.h = h;
    this.color = color;
    this.cx = cx;
    this.cy = cy;
    this.r = r;
    this.angle = 0;
  }
  draw() {
    ctx.clearRect(0, 0, innerWidth, innerHeight);
    ctx.fillStyle = this.color;
    ctx.fillRect(this.posX, this.posY, this.w, this.h);
  }
  update() {
    this.angle  = 0.1;
    this.posX = this.cx   this.r * Math.cos(this.angle);
    this.posY = this.cy   this.r * Math.sin(this.angle);
    this.draw();
  }
}



const animate = () => {
  objArr.forEach(e => {
    e.update();
  })
  requestAnimationFrame(animate);
}

window.onload = init;

在這段代碼中，我期望輸出有 5 個矩形，它們以不同的半徑圍繞視窗的中心點旋轉，就像太陽系中圍繞太陽旋轉的行星一樣。

但我只得到一個矩形，它甚至沒有旋轉。

卡住了，不明白為什么它不起作用。

uj5u.com熱心網友回復：

您的draw函式每次都在清除，并且您只參考陣列的第一個元素。兩者的調整顯示 6 個物件在旋轉。您的回圈從 0 到 5 運行。如果您需要 5 個物件，則需要將上限設定為 4。

let canvas, ctx, W, H;
canvas = document.createElement('canvas');
document.body.appendChild(canvas);
ctx = canvas.getContext('2d');
let objArr = [];

const init = () => {
  canvas.width = W = innerWidth;
  canvas.height = H = innerHeight;
  canvas.style.background = '#dedfda';

  // adjusted range
  for (let i = 0; i <= 4; i  ) {
    let r = (i   1) * 20;
    objArr.push(new Rectangle(W / 2, H / 2, 10, 10, "red", innerWidth / 2, innerHeight / 2, r));
    objArr[i].draw();
  }

  animate();
}

const random = (min = 0, max = 1) => Math.random() * (max - min)   min;

class Rectangle {
  constructor(posX, posY, w, h, color, cx, cy, r) {
    this.posX = posX;
    this.posY = posY;
    this.w = w;
    this.h = h;
    this.color = color;
    this.cx = cx;
    this.cy = cy;
    this.r = r;
    this.angle = 0;
  }
  draw() {
    ctx.fillStyle = this.color;
    ctx.fillRect(this.posX, this.posY, this.w, this.h);
  }
  update() {
    this.angle  = 0.1;
    this.posX = this.cx   this.r * Math.cos(this.angle);
    this.posY = this.cy   this.r * Math.sin(this.angle);
    this.draw();
  }
}

const animate = () => {
  // moved clear here to happen just once on each animate
  ctx.clearRect(0, 0, innerWidth, innerHeight);
  objArr.forEach(e => {
    e.update();
  })
  requestAnimationFrame(animate);
}

window.onload = init;

uj5u.com熱心網友回復：

你只是畫了一個矩形。注意

objArr[0].draw()

哪個應該是

objArr[i].draw()

另外，我認為每次呼叫Rectange物件的draw方法時，都會在此行中清除整個畫布

ctx.clearRect(0, 0, innerWidth, innerHeight);

因此，始終只出現一個矩形。

一個解決辦法是將移動到電話clearRect和update從Rectangle該animate功能。這樣它更適合程式邏輯。作為物件的 Rectangle 應該只知道如何繪制自己而不是清除畫布并更新其在畫布上的位置。

下面是我的解決方案。

let canvas, ctx, W, H;
canvas = document.createElement('canvas');
document.body.appendChild(canvas);
ctx = canvas.getContext('2d');
let objArr = [];

const init = () => {
  canvas.width = W = innerWidth;
  canvas.height = H = innerHeight;
  canvas.style.background = '#dedfda';

  for (let i = 0; i <= 5; i  ) {
    let r = (i   1) * 20;
    objArr.push(new Rectangle(W / 2, H / 2, 10, 10, "red", innerWidth / 2, innerHeight / 2, r));
    objArr[i].draw();

  }

  animate();
}

const random = (min = 0, max = 1) => Math.random() * (max - min)   min;

class Rectangle {
  constructor(posX, posY, w, h, color, cx, cy, r) {
    this.posX = posX;
    this.posY = posY;
    this.w = w;
    this.h = h;
    this.color = color;
    this.cx = cx;
    this.cy = cy;
    this.r = r;
    this.angle = 0;
  }
  draw() {
    ctx.fillStyle = this.color;
    ctx.fillRect(this.posX, this.posY, this.w, this.h);
  }

  // Should be moved outside of this class.
  update() {
    this.angle  = 0.1;
    this.posX = this.cx   this.r * Math.cos(this.angle);
    this.posY = this.cy   this.r * Math.sin(this.angle);
    ctx.fillRect(this.posX, this.posY, this.w, this.h)
  }
}

const animate = () => {
  ctx.clearRect(0, 0, innerWidth, innerHeight);
  objArr.forEach(e => {
    e.update();
  })
  requestAnimationFrame(animate);
}

window.onload = init;

標籤：javascript 帆布

上一篇：回圈的XSLT排序不起作用

下一篇：僅當陣列元素包含錯誤時才合并兩個物件陣列