canvas 制作验证码 制作干扰线

上一篇介绍了如何制作验证码，那么现在开始说一下怎么制作简单的干扰：

一、如何制作干扰线(如图这样简单的干扰线)：

定义和用法

beginPath() 方法开始一条路径，或重置当前的路径。

moveTo() 方法把路径移动到画布的指定点，但不创建图形。

lineTo() 方法添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）。

strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。

stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

for ( var i = 0; i < 10; i ++) {

ctx. beginPath();

ctx. moveTo( randNum( 0, 120), randNum( 0, 120));

ctx. lineTo( randNum( 0, 120), randNum( 0, 120));

ctx. strokeStyle = randColor( 60, 160);

ctx. stroke();

}

这里面的取随机数就不做过多的讲解了，在上篇中已经说过。

二、如何制作干扰点(如图这样简单的干扰点)：

定义和用法

arc() 方法创建弧/曲线（用于创建圆或部分圆）。

for (var i = 0; i < 10; i++) {

ctx.beginPath();

ctx.arc(randNum(0, 120), randNum(0, 30), randNum(1, 5), 0, 2 * Math.PI);

ctx.strokeStyle = randColor(60, 160);

ctx.stroke();

}

如何制造干扰 就先写到这里，下面放一下整体的码

    var canvas = document. querySelector( ' #canvas ');

var ctx = canvas. getContext( ' 2d '); // 创建画布

draw();

canvas. onclick = function () {

draw();

}

function draw() {

// 验证码的绘制

/*绘制一个颜色随机的矩形*/

ctx. fillStyle = randColor( 170, 250);

ctx. fillRect( 0, 0, 120, 30);

var data = ' ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890 ';

for ( var i = 0; i <= 90; i += 30) { // i = 0 30 60 90

var c = data[ randNum( 0, data. length - 1)];

ctx. fillStyle = randColor( 60, 160);

ctx. font = randNum( 15, 40) + ' px SimHei ';

ctx. fillText( c, i + randNum( 0, 15), randNum( 15, 30));

}

// 绘制干扰线

for ( var i = 0; i < 10; i ++) {

ctx. beginPath();

ctx. moveTo( randNum( 0, 120), randNum( 0, 120));

ctx. lineTo( randNum( 0, 120), randNum( 0, 120));

ctx. strokeStyle = randColor( 60, 160);

ctx. stroke();

}

// 绘制干扰点

for ( var i = 0; i < 10; i ++) {

ctx. beginPath();

ctx. arc( randNum( 0, 120), randNum( 0, 30), randNum( 1, 5), 0, 2 * Math. PI);

ctx. strokeStyle = randColor( 60, 160);

ctx. stroke();

}

}

function randColor( min, max) {

var r = Math. floor( Math. random() * ( max - min + 1) + min);

var g = Math. floor( Math. random() * ( max - min + 1) + min);

var b = Math. floor( Math. random() * ( max - min + 1) + min);

return ' rgb( ' + r + ' , ' + g + ' , ' + b + ' ) ';

}

function randNum( min, max) {

var num = Math. floor( Math. random() * ( max - min + 1) + min);

return num;

    }