通过 Angular Renderer2 编辑画布不起作用

如何解决通过 Angular Renderer2 编辑画布不起作用

在阅读 Angular 的文档时，我发现了一条信息，指出 DOM 元素应该由 Renderer2 类更改。我尝试更新我使用 ViewChild 指令的项目，但这种方式不适用于 HTML Canvas 元素，正常的 HTML 元素就像一个魅力。 Renderer2 不支持 HTML Canvas Element 修改吗？

    @ViewChild('canvas_foreground',{static: true}) canvasForeground: ElementRef<HTMLCanvasElement>;
    @ViewChild('canvas_background',{static: true}) canvasBackground: ElementRef<HTMLCanvasElement>;
    wrapper: ElementRef<HTMLElement>;

    ngOnInit(): void {
        this.wrapper = this.el.nativeElement.querySelector('.canvases-wrapper');
        this.setWidthAndHeight();
        ...
    }

    setWidthAndHeight(): void {
        ...
        // working method
        this.renderer.setStyle(this.wrapper,'width',this.screenWidth);
        this.renderer.setStyle(this.wrapper,'height',this.screenHeight);

        // working method
        this.canvasBackground.nativeElement.width = this.screenWidth;
        this.canvasBackground.nativeElement.height = this.screenHeight;
        this.canvasForeground.nativeElement.width = this.screenWidth;
        this.canvasForeground.nativeElement.height = this.screenHeight;

        //not working method
        this.renderer.setStyle(this.canvasBackground.nativeElement,this.screenWidth);
        this.renderer.setStyle(this.canvasBackground.nativeElement,this.screenHeight);
        this.renderer.setStyle(this.canvasForeground.nativeElement,this.screenWidth);
        this.renderer.setStyle(this.canvasForeground.nativeElement,this.screenHeight);
     }