打字稿画布答案

【问题标题】：Typescript Canvas打字稿画布
【发布时间】：2017-04-27 09:05:48
【问题描述】：

我正在学习打字稿，这门课有问题，我现在的代码是这样的

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

画布不是这样创建的，屏幕上什么也没有出现，谁能帮忙？

【问题讨论】：

您是否在某处创建了Game 类的实例？
我猜你是在干扰全局 Window 构造函数。
我没有创建 Game 的实例，现在我只有这两个这样的类

标签： javascript html typescript dom canvas

【解决方案1】：

您正在初始化画布，但并未绘制它。首先，我为canvas 和ctx 添加了类型，还为单元格大小添加了新属性

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

然后创建一个函数来绘制：

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

这里是完整的代码：

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

这是工作证明：

【讨论】：