介绍 & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;才能meta charset=癠TF-8"比;
& lt;才能title> Title</title>
& lt;/head>
& lt; body>
& lt; style>
,
canvas {才能
边境:,,,,1 px solid # 000;
,,,vertical-align:,底部;
,,}
,
input {才能
,,,填充:,0;
,,,宽度:,120 px;
,,,身高:,30 px;
,,,vertical-align:,底部;
边境:,,,,1 px solid # 000;
,,}
,
& lt;/style>
,
,
& lt; input 类型=皌ext", name=皌extContent",占位符=笆淙搿氨?
& lt; canvas id=癱an",宽度=?20“,身高=?0“祝辞& lt;/canvas>
& lt; button>提交& lt;/button>
,
,
& lt; script>
,
,/* 1,才能背景颜色时随机的
,* 2,其中的内容是随机的
,* 3,内容的颜色,随机的
,* 4,每个字的旋转度数随机的
文,* 5日本的大小随机的
,* 6,干扰线的位置随机的
,* 7,干扰线的颜色随机的
,* 8,干扰点
*,*/,
var 才能;btn =, document.querySelector (“button");
var 才能;还要=,document.querySelector (“canvas");
var 才能;ctx =, can.getContext (“2 d");
,
var 才能;text =,“0123456789 abcdefghijklmnopqrstuvwsyzabcdefghigklmnopqrstuvwsyz";
,
,//才能设置4个内容,将canvas 平分成4分,然后让内容在1/4的空间旋转缩放//才能原理,:每一次都是位移旋转之后再回复原位
for 才能;(var 小姐:=,0;,小姐:& lt;, 4,,我+ +),{
,,,var txt =,文本(randNum (0, text.length-1)];
,
,,,ctx.fillStyle =, getRandColor (80150);
,,,ctx.font=randNum (25) +“px & # 39;宋体& # 39;“;
,,,ctx.textBaseline =,“top";
,,,var x =, randNum (0, 10);
,
,,,var deg =, randNum (-30, 30);
,
,,,ctx.translate (x + 30 *我,0);
,,,ctx.rotate (Math.PI/180 *度);
,,,ctx.fillText (txt, 0, 0);
,,,ctx.rotate (Math.PI/180 *度);
,,,ctx.translate (- (x + 30 *我),0);
,
,,}
,
,/*才能干扰点*/,,(var 我=0;i<30;我+ +){
,,,ctx.beginPath ();
,,,ctx.arc (randNum (0120), randNum (0, 30), 1, 0, Math.PI * 2);
,,,ctx.fillStyle=getRandColor (150180);
,,,ctx.fill ();
,,}
,/*才能干扰线*/,,(var i=0; i<4,我+ +){
,,,ctx.beginPath ();
,,,ctx.moveTo (randNum (0120), randNum (0, 30));
,,,ctx.lineTo (randNum (0120), randNum (0, 30));
,,,ctx.strokeStyle=getRandColor (150180);
,,,ctx.lineWidth=, randNum (1、2);
,,,ctx.stroke ();
,,}
,
,/*,才能获取随机色值*/,//,才能,a 先获取一个随机数
console.log才能(math . random());,//产生一个0 ~ 1之间的随机小数
var 才能;num =, math . random(), *,(100年,安康;30,+,- 1),+,30,,//产生一个随机数30 ~ 100,之间的数
console.log才能(num);
,//,才能,b 获取一个区间段的随机数(整数)
function 才能randNum(最小值,最大值),{
,,,return 方法(math . random (), *, (max 安康;min +, 1), +, min);
,,}
,//,,,,,c获取随机颜色值
function 才能getRandColor(最小值,最大值),{
,,,var R =, randNum(最小值,最大值);
,,,var G =, randNum(最小值,最大值);
,,,var B =, randNum(最小值,最大值);
,
,,,return & # 39; rgb (& # 39;, +, R +, & # 39;, & # 39;, +, G +, & # 39;, & # 39;, +, B +, & # 39;) & # 39;;
,,}
,
,
& lt;/script>
,
,
& lt;/body>
& lt;/html>
使用JavaScript与画布上实现一个验证码生成功能吗?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
源码展示:
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注行业资讯频道,感谢您对的支持。
