Canvas路径未渲染求助：小游戏开发中图形无法显示

Hey there! I see you're diving into Canvas game development and hit a snag with getting your shapes to show up—let's work through these issues step by step to get those circles rendering on screen.

1. Missing Return Value in randomNum Function #

This is the biggest blocker: your randomNum function calculates a random number but never returns it! That means every time you call it, you're passing undefined to your Shape constructor—so there's no valid position or radius to draw. Fix it by adding a return statement:

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

2. this Context Bug in setInterval #

Inside the setInterval callback in your addShape method, this doesn't refer to your CanvasState instance (it points to the global window object instead). Plus, your createShape method doesn't actually accept a context parameter—you're already using the global context variable there anyway.

Fix this by using an arrow function (which preserves the outer this context) and removing the unnecessary parameter:

addShape() {
  setInterval(() => {
    const randomRad = randomNum(10, 100);
    const shape = new Shape(
      randomNum(randomRad, canvasWidth - randomRad),
      -randomRad,
      randomRad
    );
    shape.createShape(); // No need to pass context here
    this.shapes.push(shape);
  }, 1000);
}

3. Optional (But Recommended): Avoid Global Context #

Right now you're relying on a global context variable, which can cause headaches as your game grows. Let's encapsulate the context inside the CanvasState class and pass it to each Shape instead:

class Shape {
  constructor(x, y, rad, context) {
    this.x = x;
    this.y = y;
    this.rad = rad;
    this.context = context; // Store context in the shape instance
  }
  createShape() {
    this.context.beginPath();
    this.context.arc(this.x, this.y, this.rad, 0, 2 * Math.PI, false);
    this.context.fillStyle = '#000';
    this.context.fill();
  }
}

class CanvasState {
  constructor() {
    this.canvas = canvas[0];
    this.context = this.canvas.getContext('2d'); // Initialize context here
    this.canvas.height = canvasHeight;
    this.canvas.width = canvasWidth;
    this.shapes = shapes;
  }
  addShape() {
    setInterval(() => {
      const randomRad = randomNum(10, 100);
      const shape = new Shape(
        randomNum(randomRad, canvasWidth - randomRad),
        -randomRad,
        randomRad,
        this.context // Pass the instance's context to the shape
      );
      shape.createShape();
      this.shapes.push(shape);
    }, 1000);
  }
}

4. Quick CSS Check #

Make sure your .gameContainer canvas has proper styling to avoid stretched or off-screen shapes:

.gameContainer {
  display: block; /* Removes default inline spacing */
  width: 100vw;
  height: 100vh;
}

Full Fixed Code #

Here's the complete working version with all fixes applied:

const canvas = document.getElementsByClassName('gameContainer');
let canvasWidth = window.innerWidth;
let canvasHeight = window.innerHeight;
let shapes = [];

class Shape {
  constructor(x, y, rad, context) {
    this.x = x;
    this.y = y;
    this.rad = rad;
    this.context = context;
  }
  createShape() {
    this.context.beginPath();
    this.context.arc(this.x, this.y, this.rad, 0, 2 * Math.PI, false);
    this.context.fillStyle = '#000';
    this.context.fill();
  }
}

class CanvasState {
  constructor() {
    this.canvas = canvas[0];
    this.context = this.canvas.getContext('2d');
    this.canvas.height = canvasHeight;
    this.canvas.width = canvasWidth;
    this.shapes = shapes;
  }
  addShape() {
    setInterval(() => {
      const randomRad = randomNum(10, 100);
      const shape = new Shape(
        randomNum(randomRad, canvasWidth - randomRad),
        -randomRad,
        randomRad,
        this.context
      );
      shape.createShape();
      this.shapes.push(shape);
    }, 1000);
  }
}

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

function init() {
  const cvs = new CanvasState();
  cvs.addShape();
}

window.onload = function() {
  init();
}

After applying these changes, you should see black circles falling from the top of your screen every second!

内容的提问来源于stack exchange，提问作者Corcs