一、如何制作干扰线(如图这样简单的干扰线)：
定义和用法
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;
}