Angular 2中canvas的clearRect方法无法正常工作的问题

我帮你排查下这个canvas clearRect()不生效的问题，这种情况大多是几个常见原因导致的，咱们一步步解决：

1. 先确认clearRect()的参数是否覆盖整个画布 #

很多时候clearRect()没效果，是因为你用了固定数值或者错误的尺寸。必须用canvas元素本身的width和height（不是CSS设置的显示尺寸）来作为clearRect()的宽高参数，这样才能确保清除整个绘图缓冲区：

this.context.clearRect(0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height);

如果只是写死clearRect(0,0,500,500)，但实际canvas的绘图尺寸不一样，自然清不掉内容。

2. 保证canvas的绘图缓冲区和显示尺寸一致 #

如果你只在CSS里给canvas设置了宽高，但没给canvas元素本身加width和height属性，会导致绘图坐标系被拉伸，这时候就算调用clearRect()，视觉上也看不出变化。比如模板里要这样写：

<canvas #myCanvas width="800" height="600" style="width: 100%; height: auto;"></canvas>

或者在组件初始化时动态匹配显示尺寸：

ngAfterViewInit() {
  const canvasEl = this.canvas.nativeElement;
  // 让绘图缓冲区尺寸和显示尺寸一致
  canvasEl.width = canvasEl.offsetWidth;
  canvasEl.height = canvasEl.offsetHeight;
  this.context = canvasEl.getContext('2d');
}

3. 清除后重置绘图状态 #

你之前试的beginPath()其实是用来重置路径的，不是清除绘图状态，但如果之前的绘制留下了未闭合的路径，可能会影响后续操作。所以在clearRect()之后加上beginPath()是个好习惯：

clearCanvas() {
  const canvasEl = this.canvas.nativeElement;
  this.context.clearRect(0, 0, canvasEl.width, canvasEl.height);
  this.context.beginPath(); // 重置路径，避免后续绘制受之前路径影响
}

完整修复后的代码示例 #

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

@Component({
  selector: 'my-app',
  template: `
    <h1>Angular 2 Canvas Clear Demo</h1>
    <img src="your-image-path" (click)="clearCanvas()" alt="Click to clear canvas">
    <canvas #myCanvas width="800" height="600"></canvas>
  `
})
export class AppComponent implements AfterViewInit {
  @ViewChild('myCanvas') canvas: any;
  private context: CanvasRenderingContext2D;

  ngAfterViewInit() {
    this.context = this.canvas.nativeElement.getContext('2d');
    this.drawInitialShape(); // 初始化绘制一个矩形
  }

  drawInitialShape() {
    this.context.fillStyle = '#ff4444';
    this.context.fillRect(50, 50, 150, 150);
  }

  clearCanvas() {
    const canvasEl = this.canvas.nativeElement;
    // 清除整个画布
    this.context.clearRect(0, 0, canvasEl.width, canvasEl.height);
    // 重置路径
    this.context.beginPath();
  }
}

如果还是没效果，你可以检查下是不是有其他代码在clear之后又重新执行了绘制（比如某些钩子函数重复调用绘图逻辑），或者有没有创建多个canvas context实例。

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