使用H5新标签canvas制作验证码

最新推荐文章于 2021-12-01 20:14:27 发布

weixin_30764137

最新推荐文章于 2021-12-01 20:14:27 发布

阅读量103

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/skyforever/p/7760465.html

本文介绍了一种使用HTML和JavaScript生成验证码图片的方法。通过设置HTML元素包括一个用于显示验证码的canvas标签，利用JavaScript动态生成随机字符串作为验证码，并将其绘制到canvas上。文章详细解释了如何设置canvas属性、生成随机颜色及线条干扰等。

html元素：

JS脚本：

var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d');
drawString(randomString());
function randomString(){
var code='';
var source='012345789ascdefgqwrtyuioplkjghmnvczx';

for(var i=0;i<4;i++){
var index=Math.floor(Math.random()*source.length);
code = code+ source.charAt(index);
}
return code;
}

function drawString(code){
sessionStorage.setItem('Code',code);
cxt.clearRect(0,0,canvas.width,canvas.height);
cxt.fillStyle='#ccc';
cxt.font='30px 黑体';
cxt.textBaseline='top';
for(var i=0;i<code.length;i++){
var r=randomNumber(0,255);
var g=randomNumber(0,255);
var b=randomNumber(0,255);
var h=randomNumber(0,canvas.height-30);
cxt.fillStyle='rgb('+ r + ',' + g + ',' + b + ')';
cxt.fillText(code.charAt(i),10 + i*18,h);
}
for(var i=0;i<20;i++){
var x1 = randomNumber(0,canvas.width);
var y1 = randomNumber(0,canvas.height);

var x2 = randomNumber(0,canvas.width);
var y2 = randomNumber(0,canvas.height);

cxt.strokeStyle='#ddd';
cxt.beginPath();
cxt.moveTo(x1,y1);
cxt.lineTo(x2,y2);
cxt.closePath();
cxt.stroke();
}
}
canvas.onclick=function(e){
var code = randomString();

drawString(code);
}
function randomNumber(min,max){
return Math.floor(Math.random()*(max-min+1)+min);
}

转载于:https://www.cnblogs.com/skyforever/p/7760465.html