最近,用 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. leetcode 【 Search in Rotated Sorted Array 】python 实现

    题目: Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7  ...

  2. 【Luogu P1637】 三元上升子序列

    对于每个数$a_i$,易得它对答案的贡献为 它左边比它小的数的个数$\times$它右边比它大的数的个数. 可以离散化后再处理也可以使用动态开点的线段树. 我使用了动态开点的线段树,只有需要用到这个节 ...

  3. loadrunner11使用wplus_init_wsock录制非IE脚本/手机抓包

    假如你的IE版本号太高,或者是chrome,firfox,又或者想录手机上的包,可以用loadrunner的wplus_init_wsock工具   1.在创建LR脚本的Start Recording ...

  4. 【LeetCode】Implement strStr()(实现strStr())

    这道题是LeetCode里的第28道题. 题目描述: 实现 strStr() 函数. 给定一个 haystack 字符串和一个 needle 字符串,在 haystack 字符串中找出 needle ...

  5. RESTful-rest_framework应用第二篇(get、post的序列化与反序列化)

    目的是: 利用rest_framework实现对数据库内容的查看get请求(序列化).提交保存数据post请求 (反序列化) rest_framework序列化组件(即查看和) 第一步:基于Djang ...

  6. RESTful-rest_framework应用第一篇

    一:了解RESTful 主要是做前后端分离用的,RESTful只做后台数据和接口,供外面去调用. REST是Representational State Transfer的简称,中文翻译为“表征状态转 ...

  7. java流(二)

    目录 1 ObjectOutputStream/ObjectInputStream的使用 2 序列化 3 具体序列化的过程 4 Externalizable的简易介绍 实现序列化的Person类 /* ...

  8. linux配置Hadoop伪分布安装模式

    1)关闭禁用防火墙: /etc/init.d/iptables status 会得到一系列信息,说明防火墙开着. /etc/rc.d/init.d/iptables stop 关闭防火墙 2)禁用SE ...

  9. idea下的hibernate反向生成插件

    阅读目录 1. 打开 DataBase 窗口,添加数据源 2. 添加 hibernate 持久层支持,生成实体 Bean /配置文件 谈起 Hibernate 应该得知道 Gavin King 大叔, ...

  10. iOS-文本段落样式NSMutableParagraphStyle与NSParagraphStyle的使用和一些富文本处理属性

    开发过程中,经常会遇到动态计算行高的问题, - (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)op ...