//填充画布,五位随机数
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. NOIp2018集训test-10-16 (bike day2)

    “毕姥爷:今天的题好简单啊,你们怎么考得这么烂啊,如果是noip你们就凉透了啊“ 今天的题难度应该是3.2.1递减的,但是我不知道哪根筋没搭对,平时我最多1h多就弃题了,今天硬生生写了2h20min的 ...

  2. Dockerfile创建MySQL容器

    本文目的是创建一个MySQL的image,并且在新创建出来的容器里自动启动mysql服务接受外部连接 步骤: 1. 首先创建一个目录并在目录下创建一个Dockerfile,文件内容如下 FROM ce ...

  3. HDOJ1150(最小点集覆盖)

    #include <cstdio> #include <cstdlib> #include <cstring> #include <algorithm> ...

  4. spring初始化顺序

    首先,Spring bean的默认加载顺序是怎么控制的 工程中有2个bean,A和B,其中必须先初始化A再初始化B,但是没有depend-on或者Order等方式去保证,只不过恰好刚好这么运行着没出事 ...

  5. 微服务理论之四:SOA

    1.什么是SOA? SOA代表了面向服务的架构. SOA是一种使用松耦合的黑盒子服务构建业务应用的体系架构,这些服务可以通过编排连接在一起以实现特定的功能. 2.SOA特点 以下是服务的SOA的主要特 ...

  6. 【转】ruby 时间日期处理

    我们可以使用Time类来生成一个当前时间的对象: t = Time.new 或 t = Time.now Time类有类方法mktime(同义方法是local方法)来根据传入的参数生成时间对象,并且它 ...

  7. MySQL(介绍1)

    数据库(Database)是按照数据结构来组织.存储和管理数据的仓库: 也可以将数据存储在文件中,但是在文件中读写数据速度相对较慢. 在WEB应用方面MySQL是最好的RDBMS(Relational ...

  8. TS学习之接口

    TypeScript的核心原则之一是对值所具有的结构进行类型检查.接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约. interface testType { name: string; ...

  9. ubuntu下hive-0.8.1配置

    1.下载hive包wget http://labs.mop.com/apache-mirror/hive/stable/hive-0.8.1.tar.gz,并用tar -xzvf 将其解压到要安装的目 ...

  10. Object.prototype.toString.call(arg)详解

    经常能碰到Object.prototype.toString.call对参数类型进行判断,一开始只知道怎么使用,却不了解具体实现的原理,最近恶补了一下相关知识,写个笔记加强理解,有什么不对的请指教. ...