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;
}