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 ...
随机推荐
- Skype SILK codec overview
最近简单看了一下Skype SILK codec 算法, 基本原理和流程大体明白了, 以后有时间再仔细研究一下细节,今天就简单说说. SILK Codec是一个语音和音频编解码算法, 对于音频带宽.网 ...
- 文件系统(node.js学习笔记)
根据nodejs菜鸟教程整理. 官方API文档:nodeJS文件系统API 其他整理:nodejs File System 文件系统操作函数分类 1.引用: 导入文件系统模块(fs)语句:var fs ...
- 第k大区间(平均数)--LH
老师自己出的题,由于没有评测的地方, 我就只说做法啦.(其实是懒得写)(逃ヽ(゚∀゚*)ノ━━━ゥ♪ 以下是个人的见解,如果错了告诉我哦⊙0⊙? 最近特别喜欢用画图写字,,☆⌒(*^-゜)v!
- Hyperledger fablic 0.6 在centos7环境下的安装与部署
原文:http://blog.csdn.net/zhaoliang1131/article/details/54617274 Hyperledger Fabric超级账本 项目约定共同遵守的 基本原则 ...
- sysbench安装、使用
二.编译安装 编译非常简单,可参考 README 文档,简单步骤如下: cd/tmp/sysbench-0.4.12-1.1./autogen.sh./configure --with-mysql ...
- Erlang pool management -- Emysql pool
从这篇开始,这一系列主要分析在开源社区中,Erlang 相关pool 的管理和使用. 在开源社区,Emysql 是Erlang 较为受欢迎的一个MySQL 驱动. Emysql 对pool 的管理和使 ...
- Python:正则表达式(二)
则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配. Python 自1.5版本起增加了re 模块,它提供 Perl 风格的正则表达式模式. re 模块使 Python 语 ...
- hashCode之二--Java:重写equals()和hashCode()
以下内容总结自<Effective Java>. 1.何时需要重写equals() 当一个类有自己特有的“逻辑相等”概念(不同于对象身份的概念). 2.设计equals() [1]使用in ...
- 通过设置swift中container的ACL提供匿名访问及用户授权读取服务
在上层使用swift提供的云存储服务的过程中,提出了无需验证的使用需求. 在参考了:http://my.oschina.net/alanlqc/blog/160196(curl命令操作) 官方文档: ...
- Python-实现与metasploit交互并进行ms17_010攻击
关于ms17_010,可参考http://www.cnblogs.com/sch01ar/p/7672454.html 目标IP:192.168.220.139 本机IP:192.168.220.14 ...