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

以上

angular使用canvas操作时报错的更多相关文章

  1. svn执行clean up 操作时报错 "Previous operation has not finished; run 'cleanup' if it was interrupted"解决如下!

    今天在项目中更新的时候,突然间爆了一个svn的这个错误,当时提示我去clean up操作,结果我执行clean up操作时候,还是报错,后来坚持出来,是因为ios项目中的一个图标出了问题,使svn进入 ...

  2. 对ArrayList操作时报错java.util.ConcurrentModificationException null

    用iterator遍历集合时要注意的地方:不可以对iterator相关的地方做添加或删除操作.否则会报java.util.ConcurrentModificationException 例如如下代码: ...

  3. 高级复制实验配置添加复制节点操作时报错:ORA-23308: object GP.T does not exist or is invalid

    出错原因: 使用高级复制时,在源端启动复制支持,执行语句:REPADMIN@bys1>execute dbms_repcat.generate_replication_support('gp', ...

  4. MySQL执行插入操作时报错1366 - Incorrect string value

    今天在测试mysql时,发现插入数据的问题,下面和大家分享下解决方法: 首先看问题原因: [Err] 1366 - Incorrect string value: '\xCF\xD6' for col ...

  5. github执行clone操作时报错

    在执行github上的clone操作时,报 ssh_exchange_identification: Connection closed by remote host 在网上找了好多种解决办法,都没有 ...

  6. windows操作报错:无法启动此程序,因为计算机中丢失api-ms-win-core-winrt-string-l1-1-0.dll

    在Windows上做提交svn操作时报错:无法启动此程序,因为计算机中丢失api-ms-win-core-winrt-string-l1-1-0.dll,如下图: 解决办法: 在 https://cn ...

  7. 在用python操作mysql时报错:ModuleNotFoundError: No module named 'MySQLdb'

    用Flask+python+mysql写一个小项目 系统 win10 py版本:3.6.1 在配置数据库时报错ModuleNotFoundError: No module named 'MySQLdb ...

  8. 关于Quartus II 13.0对应开发NIOS II软件程序时报错Symbol 'NULL' could not be resolved问题的解决方法

    关于Quartus II 13.0对应开发NIOS II软件程序时报错Symbol 'NULL' could not be resolved问题的解决方法 近期在评估使用NIOS II处理器进行项目的 ...

  9. svn执行clean up命令时报错

    svn执行clean up命令时报错“Previous operation has not finished; run 'cleanup' if it was interrupted”.无论你到那个父 ...

随机推荐

  1. couchbase map reduce

    map function(){emit(null,2);} reduce function(key, values, rereduce){ var response = {"a": ...

  2. ADO之密码验证--3次错误就锁定

    这个程序是那vs2010下写的,C#语言.数据库是sql server 2008 首先在数据库中新建一个数据库Test1,在数据库中新建一个表用来保存用户名和密码USERINFO, CREATE TA ...

  3. dib build ipa image Injection password

    针对dib制作的deploy image,注入密码有两种方式: devuser/dynamic-login .对应 dib 添加密码,是通过 dynamic-login element 来完成的. 首 ...

  4. [python][django学习篇][10]再次修改博客首页模板

    目前我们看到的只是模板中预先填充的一些数据,我们得让它显示从数据库中获取的文章数据.下面来稍微改造一下模板: 删除所有article标签,然后添加以下内容,将从数据库读取到的内容填充到模板变量{{ p ...

  5. table中填写数据并批量增加

    <table class = "table jtable table-bordered table-striped hide" id = "table_1" ...

  6. 经典SQL语句大全、50个常用的sql语句

    50个常用的sql语句 Student(S#,Sname,Sage,Ssex) 学生表 Course(C#,Cname,T#) 课程表 SC(S#,C#,score) 成绩表 Teacher(T#,T ...

  7. 【ubuntu】配置zsh

    1. 修改默认shell为zsh chsh -s /bin/zsh echo $SHELL$ 2. 下载oh-my-zsh wget https://raw.github.com/robbyrusse ...

  8. CSS3 Flex布局和Grid布局

      1 flex容器的六个属性 flex实现垂直居中: <div class="box"> <span class="item">< ...

  9. nodeJS学习(5) --- sublime Text3 安装使用

    本节对对工具 sublime Text3 的安装进行简介. 主要参考网址:http://blog.csdn.net/sam976/article/details/52076271   http://w ...

  10. pat 甲级 1034. Head of a Gang (30)

    1034. Head of a Gang (30) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue One wa ...