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 中定义的,因此,我们需要指定类型。

 

以上

 

posted @ 2018-06-25 14:40  我为什么要写这个  阅读(2597)  评论(0编辑  收藏  举报