Общее приближение к использованию canvas в javascript выглядит так:
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
но в Angular2 я не могу получить объект HTMLCanvasElement, var "canvas" получает только HTMLElement в Angular2. Итак, как использовать холст в Angular2? И, кроме того, как использовать сторонний javascript в Angular2 с языком TypeScript?
Если вы не хотите расстраивать угловых богов, используйте @ViewChild
В своем HTML добавьте ссылку на шаблон.
<canvas #myCanvas></canvas>
В вашем классе сделайте следующее.
import { ViewChild, ElementRef } from '@angular/core';
...
// Somewhere above your class constructor
@ViewChild('myCanvas') myCanvas: ElementRef;
public context: CanvasRenderingContext2D;
// Somewhere under the class constructor we want to wait for our view
// to initialize
ngAfterViewInit(): void {
this.context = (<HTMLCanvasElement>this.myCanvas.nativeElement).getContext('2d');
}
Старайтесь не использовать документ как можно дольше, так как он может укусить вас в долгосрочной перспективе. Кроме того, использование @ViewChild имеет преимущество перед запросом DOM после компиляции приложения. Angular уже заранее знает, на какой элемент он должен внести изменения, вместо того, чтобы искать его в DOM.
Для полного примера проверьте это демо
Обновить
Для угловых 8 вам нужно использовать ViewChild как это.
@ViewChild('myCanvas', {static: false}) myCanvas: ElementRef;
См. Как мне использовать новую статическую опцию для @ViewChild в Angular 8? для дополнительной информации
Вы ищете что-то вроде этого?
var canvas: HTMLCanvasElement = <HTMLCanvasElement> document.getElementById('tutorial');
var ctx: CanvasRenderingContext2D = canvas.getContext("2d");