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 中定義的，所以，咱們須要指定類型。

 

以上