angular - 为什么 ElementRef to Canvas 在这里不起作用？

Question

我尝试将图像加载到画布中。

在模板中

<canvas #myca id="mycanvas" style="width: 600px; height; 600px; border: 2px red solid;" (mousedown)="mdown ($event)"></canvas>

在组件中

@ViewChild('myca', {static: false}) myca: ElementRef <HTMLCanvasElement>;

ngOnInit ()
{
    // ctx by id works!
    //var ctx = (<HTMLCanvasElement> document.getElementById('mycanvas')).getContext('2d'); 

    // ctx by ElementRef fails!
    var ctx = this.myca.nativeElement.getContext('2d'); 

    var img1 = new Image();
    img1.src = "http://any_img_you_want.jpg";

    img1.onload = function () 
    {
        ctx.drawImage (img1, 0, 0);
    }
}

如果我通过 id 获得 ctx，它就可以工作。如果我通过 ElementRef 来做，它会失败。这里有什么问题？

标签： angularviewchild

Answer 1

是选角的问题。下面的代码应该可以工作：

@ViewChild('myca') myca: ElementRef;

ngOnInit () {

    const ctx = (<HTMLCanvasElement>this.myca.nativeElement).getContext('2d');

    var img1 = new Image();
    img1.src = "http://any_img_you_want.jpg";

    img1.onload = function () {
        ctx.drawImage (img1, 0, 0);
    }
}