canvas实现画图形验证码

html:
<canvas id="canvas" @click="getCanvas()"></canvas>
mounted:
this.draw("9527")
js:
    getCanvas() {
   
        const numArr = ['mercurio13zeq', 'canvas', '9527', '11数字33', 'd字母f']
        const index = Math.floor(Math.random()*5)
        const num = numArr[index]
        this.draw(num)
    },
    draw(str) {
   
      let canvas_width = 120;
      let canvas_height = 50;
      let canvas = document.getElementById("canvas"); //获取到canvas的对象,演员
      // console.log(</
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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、付费专栏及课程。

余额充值