javascript - Typescript Canvas

Tôi đang học TypeScript và tôi gặp vấn đề với lớp này, mã của tôi hiện tại là như sau

export class Window {

    public title: string;
    public width: number;
    public height: number;
    public canvas;
    public ctx;

    public constructor(title: string, width: number, height: number) {
        this.title = title;
        this.width = width;
        this.height = height;
        this.createCanvas();
    }

    public createCanvas(): void {
        this.canvas = <HTMLCanvasElement>document.createElement('canvas');
        this.ctx = this.canvas.getContext("2d");
        this.canvas.width = 500;
        this.canvas.height = 500;
        
        document.body.appendChild(this.canvas);
}


export class Game {

    private title: string;
    private width: number;
    private height: number;

    public constructor() {
        
    }

    window: Window = new Window("titi", 100, 100);
    
}

Khung vẽ không được tạo theo cách đó, màn hình không hiển thị gì, có ai có thể giúp không?

Câu trả lời #1

Bạn đang khởi tạo canvas nhưng bạn chưa vẽ nó. Trước tiên tôi đã thêm kiểu cho canvas và ctx đồng thời tôi cũng đã thêm thuộc tính mới cho kích thước ô

  public canvas: HTMLCanvasElement;
  public ctx: CanvasRenderingContext2D;
  // 20px for the size of each cell
  CELL_SIZE = 20;

sau đó tạo một hàm để vẽ:

public drawWorld() {
    this.ctx.beginPath();
    // first draw rows
    for (let x = 0; x < this.width + 1; x++) {
      this.ctx.moveTo(this.CELL_SIZE * x, 0);
      // this will draw the line
      this.ctx.lineTo(this.CELL_SIZE * x, this.width * this.CELL_SIZE);
    }
    for (let y = 0; y < this.width + 1; y++) {
      this.ctx.moveTo(0, this.CELL_SIZE * y);
      this.ctx.lineTo(this.width * this.CELL_SIZE, this.CELL_SIZE * y);
    }

    this.ctx.stroke();
  }

Sau đó tạo một thể hiện và gọi các phương thức:

const w = new Window("canvas", 12, 12);
w.drawWorld();

Đây là toàn bộ mã:

export class Window {
  public title: string;
  public width: number;
  public height: number;
  public canvas: HTMLCanvasElement;
  public ctx: CanvasRenderingContext2D;
  // 20px for the size of each cell
  CELL_SIZE = 20;

  public constructor(title: string, width: number, height: number) {
    this.title = title;
    this.width = width;
    this.height = height;
    this.createCanvas();
  }

  public createCanvas(): void {
    this.canvas = <HTMLCanvasElement>document.createElement("canvas");
    this.ctx = this.canvas.getContext("2d");
    this.canvas.width = 500;
    this.canvas.height = 500;
    document.body.appendChild(this.canvas);
  }

  public drawWorld() {
    this.ctx.beginPath();
    // first draw rows
    for (let x = 0; x < this.width + 1; x++) {
      this.ctx.moveTo(this.CELL_SIZE * x, 0);
      // this will draw the line
      this.ctx.lineTo(this.CELL_SIZE * x, this.width * this.CELL_SIZE);
    }
    for (let y = 0; y < this.width + 1; y++) {
      this.ctx.moveTo(0, this.CELL_SIZE * y);
      this.ctx.lineTo(this.width * this.CELL_SIZE, this.CELL_SIZE * y);
    }

    this.ctx.stroke();
  }
}

const w = new Window("canvas", 12, 12);
w.drawWorld();

Đây là bằng chứng công việc: