canvas验证码简单案例

最新推荐文章于 2023-01-31 10:50:52 发布
最新推荐文章于 2023-01-31 10:50:52 发布
阅读量410 收藏 1
点赞数
分类专栏： case
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h13783313210/article/details/78920368
版权

效果图：



<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding:0;margin:0;}
#can{
border:1px solid #666;
}
</style>
</head>
<body>
<canvas id='can'>

</canvas>
<script>
//创建2d渲染区域以及初始化
var c = document.getElementById('can');
var ctx  = c.getContext("2d");
var res;
function ran(a,b){
return Math.floor(Math.random()*(b-a+1))+a;
}
//draw函数
function draw(){
res="";
ctx.clearRect(0, 0, 300, 150)
//线
for(var i= 0;i<80;i++){
ctx.strokeStyle = "rgba("+ran(0,255)+","+ran(0,255)+","+ran(0,255)+","+ran(0,100)/100+")";
ctx.beginPath();
ctx.lineWidth = ran(1,4);
ctx.moveTo(ran(0,300), ran(0,150));
ctx.lineTo(ran(0,300), ran(0,150));
ctx.stroke();
}
//圆点
for(var i= 0;i<80;i++){
ctx.beginPath();
ctx.fillStyle = "rgba("+ran(0,255)+","+ran(0,255)+","+ran(0,255)+","+ran(0,100)/100+")";
ctx.arc(ran(0,300),ran(0,150),ran(1,8),0,2*Math.PI);
ctx.fill();
}
//字符
var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
for(var i=0;i<4;i++){
var strRan = str[ran(0,35)];
ctx.fillStyle = "rgb("+ran(0,255)+","+ran(0,255)+","+ran(0,255)+")"
ctx.font = ran(50,80)+"px 微软雅黑"
ctx.fillText(strRan,i*50+50,100);
res+=strRan;
}
console.log(res)
}
draw();
c.onclick = draw;
</script>
</body>
</html>
两棵黄鹂鸣翠柳
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS+HTML5 canvas绘制验证码示例
10-17
这个简单的验证码示例展示了如何利用HTML5的canvas来实现定制化的安全验证功能。实际应用中，可能还需要考虑其他因素，如文本扭曲、噪声增加、字符模糊等，以提高验证码的安全性。同时，为了保证无障碍访问，验证码...
js+h5 canvas实现图片验证码
10-14
在这个案例中，我们将用它来创建一个包含随机字符和干扰元素的验证码图像。 1. **HTML 结构**： HTML部分主要包含一个`<canvas>`元素，用于承载验证码图像，以及一个输入框让用户输入验证码。HTML代码如下： ```...
Canvas初级小案例
cloki的博客
11-30 1342
canvas 画直线 画虚线 画矩形 画坐标系 随机生成柱状图 画圆 小案例 —— 绘制五环 小案例 —— 画一个字母 “S” 小案例 —— 画八卦镇 小案例 —— 圆形进度条 小案例 —— 饼状图 小案例 —— 小球弹一弹 小案例 —— 小球弹一弹封装 画文字 画一个闹钟
Canvas的应用实例
SpringQi
02-09 1134
（一）实现水平滑动相册中间被选择的部分图片高亮显示效果 实现原理： 1.需要两组图片，一组为高亮显示图，一组为对应的暗色显示图 2.水平滑动这里使用了HorizontalScrollView 3.显示图片的控件为LinearLayout中动态添加ImageView 4.通过ImageView的setImageDrawable来给控件设置显示图片 5.这里主要使用了自定义Drawable类，并对图...
Canvas的基本介绍与使用，图解+案例带你快速上手Canvas
~~~
09-16 4882
Canvas的基本介绍与使用，图解+案例带你快速上手Canvas
canvas的简单实例集合
马优晨
11-02 4129
这里讲解一些canvas的实例demo，大家可以参考着看看，希望对你有一定的帮助。 这里的demo主要是：canvas 绘制路径 、绘制矩形、绘制文本 、绘制圆形和扇形 、 设置渐变色 、设置渐变色 、图像处理方法、动画HTML代码<canvas id="myCanvas" width="400" height="200"> 您的浏览器不支持canvas！ </canva
Html5 Canvas绘图实例
绳锯木断，水滴石穿，专心写文，无问西东！！！
09-14 3896
前些年的时候，突然对Canvas感兴趣，利用空闲时间做一些Canvas小例子进行练习，仅供学习分享使用。如有不足之处，还请指正。 什么是 Canvas？ HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 创建 Canvas 元素及JavaScript对象 向 HTML5 页面添加 canvas 元素。规定元素的 id、宽度和高度，如下所示： <can
Canvas图片滑块拖动验证码特效特效代码
03-20
在这个案例中，特效代码模仿了QQ第三方登录页面的滑动验证码设计，为用户提供了一种直观且互动的验证体验。 首先，Canvas元素是HTML中的一个画布，通过JavaScript的绘图API，我们可以在这个画布上绘制任意图形，...
画布验证码
09-25
创建canvas验证码的过程主要包括以下几个步骤： 1. **创建canvas元素**：首先在HTML文档中插入一个canvas元素，并设置其宽高，如`<canvas id="captcha" width="120" height="40"></canvas>`。 2. **获取canvas上...
基于Node.js和Canvas的验证码系统的设计与实现源码
最新发布
06-30
在这个案例中，可能需要安装`canvas`库，它提供了在Node.js环境中使用Canvas的功能。安装命令如下： ```bash npm install canvas ``` 接下来是验证码的生成逻辑。Canvas API允许我们绘制各种形状和文本，从而创建...
canvas绘图 制作的小案例
01-19
canvas绘图 制作的小案例 canvas绘图 制作的小案例 canvas绘图 制作的小案例 canvas绘图 制作的小案例
canvas绘画实例
幺妹儿儿的博客
03-17 486
（一）光束 效果如下： 完整代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas</title> <style type="text/css"> body { background-color: antiquewhite; } #canvas { background-c.
canvas基础讲解加示例
肥学的博客
06-19 750
之前其实有介绍过，只是没有给示例我们再来说说他。它内部封装的函数： 样例介绍1 样例2 样例3 点击直接资料领取 如果你在学习python或者Java哪怕是C遇到问题都可以来给我留言，因为在学习初期新手总会走很多弯路，这个时候如果没有有个人来帮一把的话很容易就放弃了。身边很多这样的例子许多人学着学着就转了专业换了方向，不仅是自身问题还是没有正确的学习。所以作为一个过来人我希望有问题给我留言，说不上是帮助就是顺手敲几行字的事情。这里有python，Java学习资料还有有有趣好玩的编程项目，更有难寻的各种
Canvas学习笔记一之简单实例
asdad22的博客
10-25 140
1.Canvas绘制步骤 1）向Html5页面添加canvas元素 2）用过JS获取canvas对象，并创建contex对象 3）指定绘路径以及样式 4）开始绘制 2.图形绘制 1）绘制直线 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-e...
使用canvas制作一个简单的验证码
RealMaybe的博客
01-31 417
使用canvas绘制文字来做一个不可复制的验证码
canvas基础实例
weixin_43360488的博客
09-03 175
canvas是一张画布 值 含义 lineWidth 线的宽度 fillStyle 填充颜色 .moveTo(100, 200) x点的坐标，y的坐标 butt 默认。向线条的每个末端添加平直的边缘。 round 向线条的每个末端添加圆形线帽。 square 向线条的每个末端添加正方形线帽。 画不同拐角的箭头 html代码如下： <canvas id=...
canvas 基础 和 动图案例
weixin_67642008的博客
11-06 2472
canvas 画布
canvas高级验证码
momDIY的博客
01-17 2454
直接上代码，canvas与原生实现的高级验证码，无法复制选中拖拽以及获取标签内元素来获取验证码的值. function showCheck(){ var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.clearRect(
canvas验证码实现过程
05-31
Canvas 验证码是一种基于 HTML5 Canvas 技术实现的验证码，它可以在前端页面上生成一个随机的图形验证码，并且可以通过 JavaScript 实现交互效果，提高用户体验。下面是实现 Canvas 验证码的步骤： 1. 在 HTML 页面中添加一个 Canvas 元素，设置宽度、高度和 ID，例如： ```html <canvas id="canvas" width="100" height="30"></canvas> ``` 2. 在 JavaScript 中获取 Canvas 元素和上下文对象，并设置绘制属性，例如： ```javascript var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#f2f2f2"; // 设置背景颜色 ctx.fillRect(0, 0, canvas.width, canvas.height); // 绘制背景 ctx.font = "20px Arial"; // 设置字体大小和样式 ctx.fillStyle = "#000"; // 设置字体颜色 ``` 3. 生成随机的验证码，并将其绘制在 Canvas 上，例如： ```javascript var code = ""; // 用于保存验证码字符串 var codeLength = 4; // 验证码长度 var codeChars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; // 验证码字符集合 for (var i = 0; i < codeLength; i++) { var index = Math.floor(Math.random() * codeChars.length); // 随机获取一个字符 var char = codeChars.charAt(index); code += char; var x = 20 + i * 20; // 计算每个字符的绘制位置 var y = 20 + Math.random() * 10; ctx.fillText(char, x, y); // 绘制字符 } ``` 4. 绘制干扰线或干扰点，增加验证码的难度，例如： ```javascript // 绘制干扰线 for (var i = 0; i < 5; i++) { var x1 = Math.random() * canvas.width; var y1 = Math.random() * canvas.height; var x2 = Math.random() * canvas.width; var y2 = Math.random() * canvas.height; ctx.strokeStyle = "#ccc"; ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); } // 绘制干扰点 for (var i = 0; i < 50; i++) { var x = Math.random() * canvas.width; var y = Math.random() * canvas.height; ctx.fillStyle = "#888"; ctx.beginPath(); ctx.arc(x, y, 1, 0, Math.PI * 2); ctx.fill(); } ``` 5. 将生成的验证码字符串返回给后端进行验证。 完整的 Canvas 验证码实现代码可以参考下面的示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Canvas 验证码</title> </head> <body> <canvas id="canvas" width="100" height="30"></canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#f2f2f2"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.font = "20px Arial"; ctx.fillStyle = "#000"; var code = ""; var codeLength = 4; var codeChars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; for (var i = 0; i < codeLength; i++) { var index = Math.floor(Math.random() * codeChars.length); var char = codeChars.charAt(index); code += char; var x = 20 + i * 20; var y = 20 + Math.random() * 10; ctx.fillText(char, x, y); } for (var i = 0; i < 5; i++) { var x1 = Math.random() * canvas.width; var y1 = Math.random() * canvas.height; var x2 = Math.random() * canvas.width; var y2 = Math.random() * canvas.height; ctx.strokeStyle = "#ccc"; ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); } for (var i = 0; i < 50; i++) { var x = Math.random() * canvas.width; var y = Math.random() * canvas.height; ctx.fillStyle = "#888"; ctx.beginPath(); ctx.arc(x, y, 1, 0, Math.PI * 2); ctx.fill(); } console.log(code); // 将验证码输出到控制台 </script> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值