html验证码图片,js+h5 canvas实现图片验证码

本文实例为大家分享了js+h5 canvas实现图片验证码的具体代码，供大家参考，具体内容如下

实现效果

一、使用技术

原生js技术+html5 canvas画图

利用Math.random()函数随机生成 颜色 字符串  及障碍物

点击 验证码可变更验证码图案

二、使用步骤

1.html+css

代码如下(示例)：

#canvas{

width: 130px;

height: 45px;

display: inline-block;

border: 1px solid #c9c9c9;

border-radius: 5px;

}

2.js

代码如下(示例)：

//验证码生成

let canvas=document.getElementById('canvas')//画布对象

let show_num=[]//装验证码的数组

//产生随机颜色

function randomColor(){

var r= Math.floor( Math.random()*256);

var g= Math.floor( Math.random()*256);

var b= Math.floor(