Angular Canvas窗口resize后内容消失，调用update无效求助

这个问题我之前也踩过坑，核心原因主要有两个：

1. Canvas元素的width/height属性被修改时，浏览器会自动清空画布并重置绘图上下文的所有状态（比如填充色、变换矩阵、线宽等）；
2. Angular的属性绑定更新DOM的时机和你调用update()的时机不匹配，导致重绘时Canvas的实际尺寸还没完成更新，或者上下文状态已经丢失。

下面是几个经过验证的解决方案，按优先级排序：

方案一：直接操作Canvas DOM元素（最可靠） #

放弃Angular的插值绑定，直接在onResize里修改Canvas的DOM属性，然后立即调用重绘方法。这样能确保尺寸变更和重绘的时机完全同步：

组件代码修改： #

先通过@ViewChild获取Canvas元素的引用：

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

@Component({
  // 你的组件元数据
})
export class YourCanvasComponent implements OnInit {
  @ViewChild('canvas') canvas!: ElementRef<HTMLCanvasElement>;
  private ctx!: CanvasRenderingContext2D;
  canvaWidth = window.innerWidth * 0.75;
  canvaHeight = window.innerHeight * 0.91;

  ngAfterViewInit() {
    // 初始化绘图上下文
    this.ctx = this.canvas.nativeElement.getContext('2d')!;
    this.update(); // 执行初始绘制
  }

  @HostListener('window:resize', ['$event']) onResize(event) { 
    this.canvaHeight = window.innerHeight * 0.91; 
    this.canvaWidth = window.innerWidth * 0.75;

    // 直接修改Canvas的DOM尺寸属性
    const canvasEl = this.canvas.nativeElement;
    canvasEl.width = this.canvaWidth;
    canvasEl.height = this.canvaHeight;

    // 立即执行重绘
    this.update();
  }

  update() {
    // 重点：每次重绘前重新初始化上下文状态（样式、变换等）
    this.ctx.fillStyle = '#2c3e50';
    this.ctx.strokeStyle = '#ecf0f1';
    this.ctx.lineWidth = 2;

    // 这里放你的绘制逻辑，比如重新渲染所有移动后的对象
    // 示例：绘制一个矩形
    this.ctx.fillRect(10, 10, 50, 50);
  }

  // 你的select、move、drop方法
  select(event: MouseEvent) { /* ... */ }
  move(event: MouseEvent) { /* ... */ }
  drop() { /* ... */ }
}

HTML代码修改： #

去掉插值绑定的width和height，因为我们直接操作DOM：

<canvas #canvas (mousedown)="select($event)" (mousemove)="move($event)" (mouseup)="drop()"></canvas>

方案二：确保重绘在DOM更新之后执行 #

如果你想保留插值绑定，可以使用requestAnimationFrame把update()推迟到下一次浏览器重绘周期，确保Angular已经完成了DOM更新：

@HostListener('window:resize', ['$event']) onResize(event) { 
  this.canvaHeight = window.innerHeight * 0.91; 
  this.canvaWidth = window.innerWidth * 0.75;

  // 用requestAnimationFrame确保DOM已更新后再重绘
  requestAnimationFrame(() => {
    this.update();
  });
}

为什么之前的Promise/tick/detectChanges没用？ #

• Promise.resolve().then(...)属于微任务，会在当前变更检测周期结束前执行，这时候DOM可能还没完成更新；
• ApplicationRef.tick()和ChangeDetectorRef.detectChanges()只是强制触发变更检测，但Canvas尺寸更新后上下文状态已经被重置，你的update()如果没有重新初始化上下文状态（比如样式、变换），还是会绘制失败。

关键注意点 #

每次Canvas尺寸变更后，一定要重新初始化绘图上下文的状态（比如填充色、描边色、变换矩阵、线宽等），因为浏览器会把这些状态重置为默认值。这也是为什么你移动对象的操作已经生效（数据模型正确），但画布上看不到——因为重绘时用了默认状态，可能和你之前的设置不一致，导致元素被绘制在不可见的位置或者样式不对。

内容的提问来源于stack exchange，提问作者Antoine Olivier