//填充画布,五位随机数
drawNumber(): void {
this.clearCanvas(); let ctx: CanvasRenderingContext2D = this.myGraph.nativeElement.getContext("2d"); ctx.shadowBlur = 200;
ctx.shadowColor = "black";
ctx.font = "italic 20px Verdana";
ctx.textAlign = "left"; var gradient = ctx.createLinearGradient(0, 0, this.myGraph.nativeElement.width, 0);
gradient.addColorStop(0, "magenta");
gradient.addColorStop(0.5, "blue");
gradient.addColorStop(1.0, "red"); ctx.strokeStyle = gradient;

var num = Math.random().toFixed(5) + "";
 this.validateCode = num.slice(2)
 ctx.strokeText(this.validateCode, 3, 22);

}

//清空画布
clearCanvas(): void {
let ctx: CanvasRenderingContext2D = this.myGraph.nativeElement.getContext("2d");
ctx.clearRect(0, 0, this.myGraph.nativeElement.width, this.myGraph.nativeElement.height);
}

angular中使用canvas画布做验证码的更多相关文章

  1. angular中service封装$http做权限时拦截403等状态及获取验证码倒计时、跨域问题解决

    封装$http.做权限时拦截403等状态及获取验证码倒计时: 拦截接口返回状态 var app = angular.module('app'); app.factory('UserIntercepto ...

  2. HTML5 中的 canvas 画布(一)

    ---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...

  3. HTML5 中的 canvas 画布(二)

    绘制图片 一.绘制图片 context.drawImage()(即把图片放到canvas里) var image = new Image();  // 先创建图片对象 image.src = '图片的 ...

  4. 记录一个h5页面生成canvas画布做签名的js插件--signature_pad

    demo地址:https://jsfiddle.net/02dLn15g/5/ GitHub地址:https://github.com/szimek/signature_pad 配置项: dotSiz ...

  5. CANVAS画布与SVG的区别

    CANVAS是html5提供的新元素<canvas>,而svg存在的历史要比canvas久远,svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或属 ...

  6. 用angular中的ng-repeat和ng-show来实现tab选项卡

    虽然我们可以用angular中的路由来做tab选项卡,但是那会让我们建立很多的页面来引入,或者建立 <script type="text/ng-template" id=&q ...

  7. h5开发中,利用微信或者QQ登陆以后获取用户头像在canvas画布显示问题

    在实际开发上先的h5页面产品中,总会遇到各种坑,好多坑都是安卓和iPhone端兼容的问题(用电脑谷歌浏览器输入  chrome://inspect/#devices可以用手机USB调试,打开) eg: ...

  8. 【Unity3d游戏开发】浅谈UGUI中的Canvas以及三种画布渲染模式

    一.Canvas简介 Canvas画布是承载所有UI元素的区域.Canvas实际上是一个游戏对象上绑定了Canvas组件.所有的UI元素都必须是Canvas的自对象.如果场景中没有画布,那么我们创建任 ...

  9. H5 Canvas | 画布中变量作用域与setInterval方法同步执行探究

    Demo - 随机绘制圆环 实现思路: 将一个圆环的绘制分成100份,setInterval()方法定义每隔时间n绘制一段新的,每份的开始路径都是上一次的结束路径,实现步进绘制. 通过Math.ran ...

随机推荐

  1. 九省联考2018 D1T1 一双木棋

    Alice和Bob轮流在n*m的棋盘上放棋子 a[i][j]表示Alice放在这的收益,b[i][j]表示Bob放在这的收益 一个地方没有棋子且它的左边上边都有棋子才能放棋子,边界外视为有一圈棋子 n ...

  2. ACM学习历程—FZU2191完美的数字(数学)

    Description Bob是个很喜欢数字的孩子,现在他正在研究一个与数字相关的题目,我们知道一个数字的完美度是 把这个数字分解成三个整数相乘A*A*B(0<A<=B)的方法数,例如数字 ...

  3. ACM学习历程—HDU5423 Rikka with Tree(搜索)

    Problem Description As we know, Rikka is poor at math. Yuta is worrying about this situation, so he ...

  4. 11g 如何添加,替换,移除,迁移 OCR ?

    一: 增加 裸设备上,创建至少280MB的裸设备,权限是640,属主是root:oinstall共享文件系统 Or NFS,创建空文件,权限是640,属主是root:oinstall root用户执行 ...

  5. 关于Snoop的用法

    snoop是开发wpf应用程序的利器.用它可以观察WPF的可视树,监听事件,更改元素属性等. 下面我介绍下snoop一些用法. 1.获取指定应用程序的UI   打开snoop,选择"Drag ...

  6. Asp.net工作流workflow实战(一)

    最近开发一个项目用到了工作流引擎,之前研究过微软的workflow所有就用它了,距离上次用有一段时间了,好多东西有点模糊了,就在此处一遍写代码一遍回忆. 首先,在我的项目中新建了.netframwor ...

  7. 8.ireport 取消自动分页,detail不分页

    转自:http://www.blogjava.net/vjame/archive/2013/10/12/404908.html 报表文件属性页面 lgnore pagination 勾选上,就可以取消 ...

  8. python 基础 进程与线程

    多进程 使用multipprocessing模块创建多进程 multiprocessing模块提供了一个Process类来描述一个进程对象.创建子进程时,需要传入一个执行函数和函数的参数.用start ...

  9. Windchill 基本业务对象

    容器容器是Windchill对象存放的地方:在Windchill中主要的容器有站点.组织.产品.存储库.项目.在Windchill中所有容器对象的父类为wt.inf.container.WTConta ...

  10. NodeJS”热部署“代码,实现动态调试(hotnode,可以实现热更新)

    NodeJS”热部署“代码,实现动态调试   开发中遇到的问题 如果你有 PHP 开发经验,会习惯在修改 PHP 脚本后直接刷新浏览器以观察结果,而你在开发 Node.js 实现的 HTTP 应用时会 ...