Canvas 在 javascript class

Question

我正在尝试将一个元素添加到 canvas 中，所有内容都由 class 管理：我做了一个 class 来控制 canvas 的大小，第二个 class 应该在同一个 canvas.

上显示一个元素

class CanvasGame {
  constructor() {
    this.canvas = document.getElementById("game");
    this.ctx = this.canvas.getContext("2d");
    this.width = window.innerWidth;
    this.height = window.innerHeight;
  }
}

class Tanks extends CanvasGame {
  constructor(ctx) {
    super(ctx);
    this.tankWidth = 45;
    this.tankhHeight = 35;
    this.angle = "angle";
    this.power = "power";
    this.colors = ["purple", "red", "yellow", "green"];
    this.startPosXp1 = Math.floor(Math.random() * this.width + 0);
    this.startPosYp1 = Math.floor(Math.random() * this.height + 0);
  }

  colorSelection() {
    return this.colors[0];
  }

  tank1() {
    this.ctx.fillStyle = this.colorSelection();
    this.ctx.fillRect(this.width, this.height, this.startPosXp1, this.startPosYp1);
  }
}

let core = new CanvasGame();
let player1 = new Tanks();

player1.tank1();

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

#game {
  display: block;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <canvas id="game"></canvas>
  <script src="src/script.js"></script>
</body>

</html>

我其实不明白为什么它不显示任何东西。有什么想法吗？

Answer 1

您混淆了 fillRect 的参数 - 它是 fillRect(x, y, width, height) 而不是 fillRect(width, height, x, y)。此外，您不需要两次实例化父对象。只需创建一个 Tank 对象。

Answer 2

fillRect 的前 2 个参数是左上角的 x 和 y 坐标。你已经将它们设置为整个 canvas (ctx) 的高度和宽度，所以坦克正在绘制，但它的左上角点被绘制在可见的 canvas 的右下角角落！

有关 canvas 的更多信息，请参阅 This 页面，祝游戏好运！

也给@muzzletov 打分，因为他有一个关于创建 canvas 两次的有效声明。您不需要，因为 'Tank' Class 已经创建了一个 canvas

class CanvasGame {
  constructor() {
    this.canvas = document.getElementById("game");
    this.ctx = this.canvas.getContext("2d");
    this.width = window.innerWidth;
    this.height = window.innerHeight;
  }
}

class Tanks extends CanvasGame {
  constructor() {
    super();
    this.tankWidth = 45;
    this.tankhHeight = 35;
    this.angle = "angle";
    this.power = "power";
    this.colors = ["purple", "red", "yellow", "green"];
    this.startPosXp1 = Math.floor(Math.random() * this.width + 0);
    this.startPosYp1 = Math.floor(Math.random() * this.height + 0);
  }

  colorSelection() {
    return this.colors[0];
  }

  tank1() {

    this.ctx.fillStyle = this.colorSelection();
    //this.ctx.fillRect(this.height, this.width,this.startPosXp1, this.startPosYp1);
    this.ctx.fillRect(0,0, this.startPosXp1, this.startPosYp1);
  }
}

//let core = new CanvasGame();
let player1 = new Tanks();

player1.tank1();

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

#game {
  display: block;
  width: 50%;
  height: 50%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <canvas id="game"></canvas>
  <script src="src/script.js"></script>
</body>

</html>

Answer 3

您的代码中有几个问题。您将 x/y 设置为 width/height，但您也没有使用正确的宽度和高度值。

渲染时需要使用坦克的宽度和高度。

class CanvasGame {
  constructor() {
    this.canvas = document.getElementById("game");
    this.ctx = this.canvas.getContext("2d");
    this.width = window.innerWidth;
    this.height = window.innerHeight;
  }
}

class Tanks extends CanvasGame {
  constructor(ctx) {
    super(ctx);
    this.tankWidth = 45;
    this.tankHeight = 35;
    this.angle = "angle";
    this.power = "power";
    this.colors = ["purple", "red", "yellow", "green"];
    this.startPosXp1 = Math.floor(Math.random() * this.tankWidth + 0);
    this.startPosYp1 = Math.floor(Math.random() * this.tankHeight + 0);
  }

  colorSelection() {
    return this.colors[0];
  }

  tank1() {
    this.ctx.fillStyle = this.colorSelection();
    this.ctx.fillRect(0, 0, this.tankWidth, this.tankHeight);
  }
}

let core = new CanvasGame();
let player1 = new Tanks(core.ctx);

player1.tank1();

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

#game {
  display: block;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <canvas id="game"></canvas>
  <script src="src/script.js"></script>
</body>

</html>

Canvas 在 javascript class

Canvas in a javascript class

javascript

canvas

class