Pesquisa de site

javascript - Como usar canvas no Angular

A abordagem comum para usar canvas em JavaScript é como:

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

mas no Angular2 eu não consigo obter o objeto HTMLCanvasElement, a variável "canvas" só obtém o HTMLElement no Angular2. Então, como usar o canvas no Angular2? E além disso, como usar o JavaScript de terceiros no Angular2 com a linguagem TypeScript?

Resposta #1

Você pode realizar isso usando @ViewChild

Na sua aula, faça o seguinte.

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')
  canvas: ElementRef<HTMLCanvasElement>;

  context: CanvasRenderingContext2D;

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

Tente evitar usar document o máximo que puder, pois isso pode causar problemas a longo prazo. Além disso, usar @ViewChild tem uma vantagem sobre consultar o DOM, uma vez que a aplicação é compilada. O Angular já sabe com antecedência em qual elemento precisa fazer as modificações, em vez de ter que encontrá-lo no DOM.

Para um exemplo completo, confira esta demonstração

Atualização

Para o Angular 8, você precisa usar ViewChild assim.

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

Veja Como devo usar a nova opção estática para @ViewChild no Angular 8? para mais informações

Resposta #2

Isso funciona para mim no Angular 13

@ViewChild('myCanvas')
private myCanvas: ElementRef = {} as ElementRef;

Eu tentei a solução do realappie, mas ainda estava me mostrando um erro

Artigos relacionados