在伪造查看器angular中创建简单几何图形的示例

ng generate component geometry

<canvas #canvasElement></canvas>

import { Component, ViewChild, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-geometry',
  templateUrl: './geometry.component.html',
  styleUrls: ['./geometry.component.css']
})
export class GeometryComponent implements AfterViewInit {
  @ViewChild('canvasElement', { static: false }) canvasElement;

  ngAfterViewInit() {
    const canvas = this.canvasElement.nativeElement;
    const context = canvas.getContext('2d');

    // 绘制一个矩形
    context.fillStyle = 'red';
    context.fillRect(50, 50, 100, 100);

    // 绘制一个圆形
    context.fillStyle = 'blue';
    context.beginPath();
    context.arc(200, 200, 50, 0, 2 * Math.PI);
    context.fill();
  }
}