javascript - Typescript Canvas - Stack Overflow

admin管理员组

文章数量:1278722

I am learning typescript and I have a problem with this class, my code now is that

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);
    
}

The canvas is not being created that way, nothing appears on the screen, can anyone help?

I am learning typescript and I have a problem with this class, my code now is that

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);
    
}

The canvas is not being created that way, nothing appears on the screen, can anyone help?

• javascript
• html
• typescript
• dom
• canvas

Share Improve this question Follow edited Jan 25, 2022 at 17:42 Yilmaz 49.7k1818 gold badges216216 silver badges268268 bronze badges asked Apr 27, 2017 at 9:05 fellipe rochafellipe rocha 7911 gold badge11 silver badge33 bronze badges 3

• Did you create instance of Game class somewhere? – Leguest Commented Apr 27, 2017 at 9:08
• 1 I suppose you are interfering with the global Window constructor function. – Jai Commented Apr 27, 2017 at 9:11
• I dont create instance of Game, for now i only have this two class like that – fellipe rocha Commented Apr 27, 2017 at 9:15

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

You are initializing the canvas but you are not drawing it. First I added types for canvas and ctx also I added new property for cell size

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

then create a function to draw:

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();
  }

Then create an instance and call the methods:

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

Here is the full code:

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();

Here is the proof of work:

本文标签： javascriptTypescript CanvasStack Overflow