【问题标题】: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 来说是无关紧要的,因为它们往往会吸引固执己见的答案和垃圾邮件。相反,请描述问题以及迄今为止为解决该问题所做的工作。

标签: angular


【解决方案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
    }
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-10-05
    • 2011-05-14
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多