Cómo usar Canvas en Angular

Solución:

Puede lograr esto usando @ViewChild

En su clase, haga lo siguiente.

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

@Component({
   name: 'my-component',
   // notice the variable name myCanvas
   template: `<canvas #myCanvas></canvas>`
})
export class myComponent implements AfterViewInit {
  // its important myCanvas matches the variable name in the template
  @ViewChild('myCanvas')
  myCanvas: ElementRef<HTMLCanvasElement>;

  public context: CanvasRenderingContext2D;

  ngAfterViewInit(): void {
    this.context = this.myCanvas.nativeElement.getContext('2d');
  }
}

Trate de mantenerse alejado de usar document tanto como pueda, ya que podría morderlo a largo plazo. También usando @ViewChild tiene una ventaja sobre la consulta del DOM, una vez que se compila la aplicación. Angular ya sabe de antemano en qué elemento necesita hacer las modificaciones, en lugar de tener que encontrarlo en el DOM.

Para obtener un ejemplo completo, consulte esta demostración.

---

Actualizar

Para angular 8 necesitas usar ViewChild como esto.

@ViewChild('myCanvas', {static: false}) myCanvas: ElementRef;

Consulte ¿Cómo debo usar la nueva opción estática para @ViewChild en Angular 8? para más información

---

---

Utiliza Nuestro Buscador