Question

我在javascript中有以下工作代码段。我无法在Angular 2+中通过document.getElementById()获取元素。还有另一种方式吗？

var canv = document.createElement('canvas');
canv.id = 'canvas';

var oldcanv = document.getElementById('canvas');

Answer 1

你需要使用这个@ViewChild来获取一个id的元素。

HTML

<canvas #canvas width="200" height="200" >         
</canvas>

组件

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

@Component({
  selector: 'canvas-anim',
  templateUrl: './canvas-anim.component.html',
  styleUrls: ['./canvas-anim.component.css']
})
export class CanvasAnimComponent implements AfterViewInit {

    @ViewChild('canvas') canvasRef: ElementRef;
    ctx: any;

    ngAfterViewInit(): void {
        this.ctx  = this.canvasRef.nativeElement.getContext('2d');         
        this.paint(this.ctx);        
    }

    paint(ctx){ 

        ctx.beginPath();
        ctx.arc(95, 50, 40, 0, 2 * Math.PI);
        ctx.stroke();
    }
}

这里有一个角度为2 Space Invaders的游戏引擎参考，你会看到很多绘画技巧。

创建canvas元素并删除（Angular 2+）

1 个答案: