使用canvas做验证码

验证码效果：

验证码

封装验证码制作：

// 获取随机颜色
function getColor(){
    return `rgb(${Math.floor(Math.random()*255)},${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)})`
}
// 获取随机数
function getRandom(a,b=0){
    var max = a;
    var min = b;
    if(a

调用使用html结构：

校验

调用代码：

// 获取当前要显示验证码的canvas标签
var code = document.querySelector('.code')
// 生成验证码
getCode(code,4)
// 点击刷新验证码
code.onclick = function(){
    // 重新生成验证码
    flush(code)
}
// 点击校验annuity
document.querySelector('button').onclick = function(){
    // 获取用户输入的验证码
    var word = document.querySelector('[name="code"]').value;
    // 调用验证函数进行验证
    var bool = verify(word)
    // 验证成功
    if(bool) alert("验证成功")
    // 验证失败
    else alert("验证失败")
}