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 ...
随机推荐
- NYOJ-括号配对问题--------待解决,RE
描述 现在,有一行括号序列,请你检查这行括号是否配对. 输入 第一行输入一个数N(0<N<=100),表示有N组测试数据.后面的N行输入多组输入数据,每组输入数据都是一个字符串S(S的 ...
- [HDU4652]Dice
vjudge 题意 \(m\)面骰子,求 1.连续出现\(n\)个相同的停止: 2.连续出现\(n\)个不同的停止 的期望投骰子次数. \(n,m ≤ 10^6\) sol 首先考虑一个转移式子吧. ...
- bzoj 2160: 拉拉队排练 回文自动机
题目: Description 艾利斯顿商学院篮球队要参加一年一度的市篮球比赛了.拉拉队是篮球比赛的一个看点,好的拉拉队往往能帮助球队增加士气,赢得最终的比赛.所以作为拉拉队队长的楚雨荨同学知道,帮助 ...
- hdu 5909 Tree Cutting —— 点分治
题目:http://acm.hdu.edu.cn/showproblem.php?pid=5909 点分治,每次的 rt 是必选的点: 考虑必须选根的一个连通块,可以DP,决策就是在每个子树中决定选不 ...
- rsync 介绍和参数说明
Rsync 介绍: 我们经常需要在不同目录或者服务器之间做文件同步和更新,Linux提供了很多内置命令可以使用比如scp等等,但是今天我们介绍一个更加强大的工具rsync.rsync 命令是一个远程同 ...
- spring IOC 注解@Autowired
自动装配:按照类型来找 会在xml中找类型一样的, 比如 setMessage(SetName setName)上面有@Autowired,会到xml中找<bean id="setna ...
- POJ3256:Cow Picnic
Cow Picnic Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 5432 Accepted: 2243 Descri ...
- java对象在内存中的结构(HotSpot虚拟机)
一.对象的内存布局 HotSpot虚拟机中,对象在内存中存储的布局可以分为三块区域:对象头(Header).实例数据(Instance Data)和对齐填充(Padding). 从上面的这张图里面可以 ...
- 通过pip3安装ipython
操作系统:Centos7.4:ipython可以用来测试python语句,故需要安装. 首先需要安装epelde的扩展库: easy_install是由PEAK(Python Enterprise A ...
- [bzoj3670] [NOI2014] [lg2375] 动物园
nxt数组为KMP的next数组num[i]储存了i前面可以匹配的串的个数.先在KMP求nxt中顺便求出num最后再找到对于i的最大的前后缀不重叠的可匹配的j,ans*=(num[j]+1)%1000 ...