angular使用canvas操作时报错

2023-08-12 08:33:52

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

以上

码农公寓