对 Angular 的画布支持

【问题标题】：Canvas Support for Angular对 Angular 的画布支持
【发布时间】：2018-05-25 06:13:50
【问题描述】：

我需要在 Angular 2/4/5/6 中在图像上绘制东西或写东西，我发现在 HTML5 中我们有画布，但是在角度 2/4/5/6？

【问题讨论】：

Canvas 与简单的 JavaScript 一起工作，只需使用它。
要求我们推荐或查找书籍、工具、软件库、教程或其他场外资源的问题对于 Stack Overflow 来说是无关紧要的，因为它们往往会吸引固执己见的答案和垃圾邮件。相反，请描述问题以及迄今为止为解决该问题所做的工作。
How to use canvas in Angular 2的可能重复

【解决方案1】：

给它一个遮阳篷

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

@Component( {
    selector: 'app-canvas',
    template: '<canvas #myCanvas width="600" height="400" style="z-index: 500;"></canvas>'
} )
export class CanvasComponent implements AfterViewInit {
    context: CanvasRenderingContext2D;
    @ViewChild( 'myCanvas' ) canvas: ElementRef;

    constructor() {}

    ngAfterViewInit() {
        const canvas = this.canvas.nativeElement;
        this.context = canvas.getContext( '2d' );

        this.tick();
    }

    tick() {
        requestAnimationFrame(() => this.tick() );

        const ctx = this.context;
        ctx.clearRect( 0, 0, 600, 400 );

        // draw stuff
    }
}

【讨论】：