<script type="text/javascript" src="./captcha.js"></script>

<canvas width="240" height="90" id="captcha1"></canvas>

 /*不传值，统一走默认值*/let captcha1 = new Captcha();captcha1.draw(document.querySelector('#captcha1'), r => {console.log(r, '验证码1');});

/*传值,参数配置值，选择性配置*/let captcha2 = new Captcha({lineWidth: 1,   //线条宽度lineNum: 6,       //线条数量dotR: 2,          //点的半径dotNum: 25,       //点的数量preGroundColor: [10, 80],    //前景色区间backGroundColor: [150, 250], //背景色区间fontSize: 30,           //字体大小fontFamily: ['Georgia', '微软雅黑', 'Helvetica', 'Arial'],  //字体类型fontStyle: 'stroke',      //字体绘制方法，有fill和strokecontent: '一个验证码abcdefghijklmnopqrstuvw生成的插件使用的是canvas显示',  //验证码内容length: 6    //验证码长度
    }); captcha2.draw(document.querySelector('#captcha2'), r => {console.log(r, '验证码2');});

npm install captcha-mini

import Captcha from 'captcha-mini'
或者
var Captcha = require("captcha-mini")

 /*不传值，统一走默认值*/let captcha1 = new Captcha();captcha1.draw(document.querySelector('#captcha1'), r => {console.log(r, '验证码1');});

/*传值,参数配置值，选择性配置*/let captcha2 = new Captcha({lineWidth: 1,   //线条宽度lineNum: 6,       //线条数量dotR: 2,          //点的半径dotNum: 25,       //点的数量preGroundColor: [10, 80],    //前景色区间backGroundColor: [150, 250], //背景色区间fontSize: 30,           //字体大小fontFamily: ['Georgia', '微软雅黑', 'Helvetica', 'Arial'],  //字体类型fontStyle: 'stroke',      //字体绘制方法，有fill和strokecontent: '一个验证码abcdefghijklmnopqrstuvw生成的插件使用的是canvas显示',  //验证码内容length: 6    //验证码长度
    }); captcha2.draw(document.querySelector('#captcha2'), r => {console.log(r, '验证码2');});

function Regcode() {}

  function Regcode(params = {}) {let p = Object.assign({...}, params); // 这里有定义好的属性和默认值Object.keys(p).forEach(k => { // 将所有属性组合后添加到this上this[k] = p[k];});}

 Regcode.prototype.draw = function(dom, callback = function () {}) { // 绘图// 获取canvas domif (!this.paint) { // 如果没有2d对象，再进行赋值操作this.canvas = dom; // 保存到this指针，方便使用if (!this.canvas) return;this.paint = this.canvas.getContext('2d'); // 保存到this指针，方便使用if (!this.paint) return;// 回调函数赋值给this，方便使用this.callback = callback;}// 随机画布颜色，使用背景色let colors = this.getColor(this.backgroundColor);this.paint.fillStyle = `rgba(${colors[0]}, ${colors[1]}, ${colors[2]}, 0.8)`;// 绘制画布this.paint.fillRect(0, 0, this.canvas.width, this.canvas.height);// 绘图this.arc();this.line();this.font();};

Regcode.prototype.getColor = function(arr) { // 随机获取颜色let colors = new Array(3).fill(''); // 创建一个长度为3的数组，值都填充为 ''colors = colors.map(v => this.getRand(...arr)); // 每个成员随机获取一个强度值重组为新数组return colors;};

因为 rgb 颜色通常表示为 rgba(0,0,0,0.8)，最后一位是透明度，这里没有参加随机。所以只考虑前3个数，在指定的强度区间内，只需要依次随机出3个数就好。所以在上面的方法中，还需要做的就是随机在一个数值区间中取值。

    Regcode.prototype.getRand = function(...arr) { // 获取某个区间的随机数arr.sort((a, b) => a - b); // 将传入的参数从小到大排序return Math.floor(Math.random() * (arr[1] - arr[0]) + arr[0]);};

4、绘制线条

 Regcode.prototype.line = function() { // 绘制线条for (let i = 0; i < this.lineNum; i++) {// 随机获取线条的起止坐标let x = this.getRand(0, this.canvas.width), y = this.getRand(0, this.canvas.height),endx = this.getRand(0, this.canvas.width), endy = this.getRand(0, this.canvas.width);this.paint.beginPath(); // 开始绘制this.paint.lineWidth = this.lineWidth;// 随机获取路径颜色let colors = this.getColor(this.foregroundColor); // 使用前景色this.paint.strokeStyle = `rgba(${colors[0]}, ${colors[1]}, ${colors[2]}, 0.8)`;// 指定绘制路径this.paint.moveTo(x, y);this.paint.lineTo(endx, endy);this.paint.closePath();this.paint.stroke(); // 进行绘制
        }};

5、绘制圆点

 Regcode.prototype.arc = function() { // 绘制圆点for (let i = 0; i < this.dotNum; i++) {// 随机获取圆心let x = this.getRand(0, this.canvas.width), y = this.getRand(0, this.canvas.height);this.paint.beginPath();// 指定圆周路径this.paint.arc(x, y, this.dotR, 0, Math.PI * 2, false);this.paint.closePath();// 随机获取路径颜色let colors = this.getColor(this.foregroundColor);this.paint.fillStyle = `rgba(${colors[0]}, ${colors[1]}, ${colors[2]}, 0.8)`;// 绘制this.paint.fill();}};

6、绘制文字

Regcode.prototype.getText = function() { // 随机获取验证码let len = this.content.length, str = '';for (let i = 0; i < this.len; i++) { // 随机获取每个因子，组成验证码str += this.content[this.getRand(0, len)];}return str;};

绘制文字的时候，注意以下几点：

1、需要通过回调函数将当前绘制的文字输出。

2、需要指定文字的旋转角度、字体类型、文字颜色、绘制风格(填充或者不填充)。

Regcode.prototype.font = function() { // 绘制文字let str = this.getText(); // 获取验证码this.callback(str); // 利用回调函数输出文字，用于与用户输入验证码进行比对// 指定文字风格this.paint.font = `${this.fontSize}px ${this.fontFamily}`;this.paint.textBaseline = 'middle'; // 设置文本基线，middle是整个文字所占方框的高度的正中。// 指定文字绘制风格let fontStyle = `${this.fontStyle}Text`;let colorStyle = `${this.fontStyle}Style`;for (let i = 0; i < this.len; i++) { // 循环绘制每个字let fw = this.paint.measureText(str[i]).width; // 获取文字绘制的实际宽度// 获取每个字的允许范围，用来确定绘制单个文字的横坐标let x = this.getRand(this.canvas.width / this.len * i, (this.canvas.width / this.len) * i + fw/2);// 随机获取字体的旋转角度let deg = this.getRand(-6, 6);// 随机获取文字颜色let colors = this.getColor(this.foregroundColor);this.paint[colorStyle] = `rgba(${colors[0]}, ${colors[1]}, ${colors[2]}, 0.8)`;// 开始绘制this.paint.save();this.paint.rotate(deg * Math.PI / 180);this.paint[fontStyle](str[i], x, this.canvas.height / 2);this.paint.restore();}};

基本上就完成了。

五、其他

欢迎使用[watermark-dom](https://github.com/saucxs/watermark-dom)插件，功能：给B/S网站系统加一个很浅的dom水印插件。

欢迎使用[captcha-mini](https://github.com/saucxs/captcha)插件，功能：生成验证码的插件，使用js和canvas生成的

欢迎使用[watermark-image](https://github.com/saucxs/watermark-image)插件，目前功能：图片打马赛克