angular中使用canvas画布做验证码
//填充画布,五位随机数
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画布做验证码的更多相关文章
- angular中service封装$http做权限时拦截403等状态及获取验证码倒计时、跨域问题解决
封装$http.做权限时拦截403等状态及获取验证码倒计时: 拦截接口返回状态 var app = angular.module('app'); app.factory('UserIntercepto ...
- HTML5 中的 canvas 画布(一)
---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...
- HTML5 中的 canvas 画布(二)
绘制图片 一.绘制图片 context.drawImage()(即把图片放到canvas里) var image = new Image(); // 先创建图片对象 image.src = '图片的 ...
- 记录一个h5页面生成canvas画布做签名的js插件--signature_pad
demo地址:https://jsfiddle.net/02dLn15g/5/ GitHub地址:https://github.com/szimek/signature_pad 配置项: dotSiz ...
- CANVAS画布与SVG的区别
CANVAS是html5提供的新元素<canvas>,而svg存在的历史要比canvas久远,svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或属 ...
- 用angular中的ng-repeat和ng-show来实现tab选项卡
虽然我们可以用angular中的路由来做tab选项卡,但是那会让我们建立很多的页面来引入,或者建立 <script type="text/ng-template" id=&q ...
- h5开发中,利用微信或者QQ登陆以后获取用户头像在canvas画布显示问题
在实际开发上先的h5页面产品中,总会遇到各种坑,好多坑都是安卓和iPhone端兼容的问题(用电脑谷歌浏览器输入 chrome://inspect/#devices可以用手机USB调试,打开) eg: ...
- 【Unity3d游戏开发】浅谈UGUI中的Canvas以及三种画布渲染模式
一.Canvas简介 Canvas画布是承载所有UI元素的区域.Canvas实际上是一个游戏对象上绑定了Canvas组件.所有的UI元素都必须是Canvas的自对象.如果场景中没有画布,那么我们创建任 ...
- H5 Canvas | 画布中变量作用域与setInterval方法同步执行探究
Demo - 随机绘制圆环 实现思路: 将一个圆环的绘制分成100份,setInterval()方法定义每隔时间n绘制一段新的,每份的开始路径都是上一次的结束路径,实现步进绘制. 通过Math.ran ...
随机推荐
- 【caffe】卷积层代码解析
1.Forward_cpu conv_layer.cpp template <typename Dtype> void ConvolutionLayer<Dtype>::For ...
- 三种 Failover 之 Client-Side Connect time Failover、Client-Side TAF、Service-Side TAF
三种 Failover 之 Client-Side Connect time Failover.Client-Side TAF.Service-Side TAF 理论背景 Oracle RAC 同时 ...
- 【转】 Pro Android学习笔记(五五):调试和分析(3):adb命令、模拟器控制台和StrictMode
目录(?)[-] adb命令 模拟器Console StrictMode adb命令 我们在学习SQLite的使用,介绍过部分adb命令的使用,见Pro Android学习笔记(五):了解Conten ...
- Trie(前缀树/字典树)及其应用
Trie,又经常叫前缀树,字典树等等.它有很多变种,如后缀树,Radix Tree/Trie,PATRICIA tree,以及bitwise版本的crit-bit tree.当然很多名字的意义其实有交 ...
- bean validator - Hibernate validator
在后台开发过程中,对参数的校验成为开发环境不可缺少的一个环节.比如参数不能为null,email那么必须符合email的格式,如果手动进行if判断或者写正则表达式判断无意开发效率太慢,在时间.成本.质 ...
- ES6学习之数值扩展
二进制和八进制表示法(二进制用前缀0b(或0B)表示,八进制用前缀0o(或0O)表示) Number('0b111') Number('0o10') Number.isFinite()(判断一个值是否 ...
- springMVC绑定json参数之一
一.SpringMVC @RequestBody接收Json对象字符串 以前,一直以为在SpringMVC环境中,@RequestBody接收的是一个Json对象,一直在调试代码都没有成功,后来发现, ...
- Flask07 Jinja2模板测试器、控制语句IF/FOR、变量/块 赋值、作用域、块级作用域
1 测试器及其使用 在模板中的 {{}} 可以书写测试器,格式如下 {{ 变量 is 测试器名称 }} 1.1 在python中导入 Jinja2 的模板 from jinja2 import te ...
- WSDL入门
WSDL: 网络服务描述语言, 是Web Service的描述语言,它全名:Web Services Description Language,是一门基于 XML 的语言,用于描述 Web Servi ...
- hdu1078
#include <stdio.h> #include <string.h> #include <algorithm> using namespace std; i ...