Question

所以我要做的就是用JavaScript在HTML画布上绘制。

我设法获得了画布，并选择了上下文来分隔变量，并绘制了一个初始的普通红色框，但此后我似乎什么也没画。

TypeScript代码：

export class ClassicComponent implements OnInit, OnDestroy, AfterViewInit {
  @ViewChild('tennisCanvas') tennisCanvas: ElementRef;
  private canvasCtx: CanvasRenderingContext2D;
  private canvasWidth: number;
  private canvasHeight: number;

...

ngAfterViewInit() {
    this.canvasCtx = (this.tennisCanvas.nativeElement as HTMLCanvasElement).getContext('2d');
    this.canvasWidth = (this.tennisCanvas.nativeElement as HTMLCanvasElement).width;
    this.canvasHeight = (this.tennisCanvas.nativeElement as HTMLCanvasElement).height;
    this.canvasCtx.fillStyle = 'black';
    this.canvasCtx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);

    this.draw();
  }

  private draw() {
    this.canvasCtx.fillStyle = 'white';
    this.canvasCtx.strokeRect(255, 210, 200, 200);
    this.canvasCtx.fillStyle = 'red';
    this.canvasCtx.fillRect(this.canvas.width / 2, 200, 50, 25);
  }

HTML：

<canvas id="tennisCanvas" #tennisCanvas>

CSS：

#tennisCanvas{
  display: block;
  width: 80vw;
  margin: auto;
  margin-top: 3rem;
  height: 80vh;
}

应该看起来像这样：https://imgur.com/mCnCjBl 但只画了一个黑色正方形。

Answer 1

画布的分辨率是其html的宽度和高度，而不是css的宽度和高度。因此，除非您在canvas html元素上设置宽度和高度，否则画布的内部分辨率将为300x150。由于您的两个矩形的y都至少为200，因此它们是在画布外部绘制的。

您可以通过将width =“ 600” height =“ 600”临时添加到画布html元素来进行测试。

但这仅对测试有用，因为图像会因css尺寸和html尺寸之间的差异而失真，因此最好将画布的宽度和高度设置为其计算出的宽度和高度，例如：

canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;

在此处查看工作示例：https://jsfiddle.net/7au2mv6f/

当然，该示例仅在运行画布时获得其当前大小。调整窗口大小后，您可能需要调整画布的大小（并重新绘制）。

在画布上进行初始绘制后无法绘制“ fillRect”-Angular2 +

1 个答案: