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 ...
随机推荐
- swiper轮播 swiper整屏轮播
近期坐了几个移动端 整屏轮播的 效果 之前都是自己一个个写,之前听说过swiper插件,没有使用过,今天一尝试,果然,爽 使用方法示例 <div class="swiper-cont ...
- windows cmd 看服务cpu、内存
开始菜单-运行-cmd-输入systeminfo-回车 不用命令从以下两个地方都可以看出CPU个数 使用命令看CPU 利用win+r键打开运行,输入cmd回车即会出现 查看cpu信息 通过上图可以看出 ...
- bzoj 4537: [Hnoi2016]最小公倍数 分块+并查集
题目大意: 给定一张n个点m条边的无向图,每条边有两种权.每次询问某两个点之间是否存在一条路径上的边的两种权的最大值分别等于给定值. n,q <= 50000. m <= 100000 题 ...
- CF1092 D & E —— 思路+单调栈,树的直径
题目:https://codeforces.com/contest/1092/problem/D1 https://codeforces.com/contest/1092/problem/D2 htt ...
- org.springframework.web.client.HttpClientErrorException: 400 null
异常代码: org.springframework.web.client.HttpClientErrorException: 400 null 已解决. 百度了一下400代表无法解析请求. 说明请求是 ...
- java.util Properties使用记录
转:http://www.2cto.com/px/201006/47834.html 在java.util 包下面有一个类 Properties,该类主要用于读取以项目的配置文件(以.properti ...
- JS---script的位置
都可以,但各有千秋.放在head中:统一管理,方便维护:但浏览器会首先加载js文件,如果js文件过大,会造成页面在加载js的时候“无反应”时间过长,影响用户体验.放在body中(或放在body后):浏 ...
- SpringMvc之参数绑定注解详解之四
简介: @RequestBody 作用: i) 该注解用于读取Request请求的body部分数据,使用系统默认配置的HttpMessageConverter进行解析,然后把相应的数据绑定到要返回的对 ...
- Zend Server 安装与配置图文教程
Zend Server是一款专业的PHP Web开发应用服务器,一些初次接触并使用此程序的朋友可能不太了解安装方法,本文为您提供了Zend Server 安装与配置图文教程,欢迎大家阅读,并提出自己的 ...
- 问题:sqlserver if;结果: SqlServer if else和case
SqlServer if else和case 分类: SQLSERVER 2013-03-01 16:51 11328人阅读 评论(0) 收藏 举报 行转列 目录(?)[+] if else 要提示的 ...