angular使用canvas操作時報錯

最近，用 angular 前端框架為應用登錄新增圖形驗證碼認證，由於沒有現成的插件，於是便使用canvas+js操作，也是可以正常使用，但是在編譯階段卻有個報錯：

ERROR in src/app/login/login.component.ts(84,19): error TS2339: Property 'getContext' does not exist on type 'HTMLElement'.

　　雖然報錯，但是確實可以正常執行，很是奇怪。報錯的代碼為：

let c = document.getElementById("myCanvas") ;
let ctx = c.getContext("2d");

　　查看源碼是有 getContext() 這個方法的。后面想是不是類型導致的呢，於是，使用類型斷言（不影響代碼運行，只是在編譯階段起作用）修改代碼入下：

let c = document.getElementById("myCanvas")  as HTMLCanvasElement;
let ctx = c.getContext("2d");

　　編譯正常通過。后面了解，還有另外一種斷言方式：

let c = <HTMLCanvasElement> document.getElementById("myCanvas") ;
let ctx = c.getContext("2d");

　　以上均可編譯通過，因為 getContext() 是在 HTMLCanvasElement 中定義的，因此，我們需要指定類型。

 

以上