写之前还是需要给不懂的朋友复制粘贴一些API的内容
canvas 元素用于在网页上绘制图形。
什么是 Canvas？
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
创建 Canvas 元素
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度：
<canvas id="myCanvas" width="200" height="100"></canvas>
通过 JavaScript 来绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript 使用 id 来寻找 canvas 元素：
var c=document.getElementById("myCanvas");
然后，创建 context 对象：
var cxt=c.getContext("2d");
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
上面介绍的也差不多了，看不太懂的小伙伴 可以去网上看看详细的教程，这方面的资源很多！
下面上源码来释放一下自己的小心情！
第一步：创建 Canvas 元素
<
canvas
id=
"
canvas
"
width
=
"
120
"
height
=
"
30
"
style
=
"
cursor: pointer;
"
></
canvas
>
第二步：创建自己的画布
var
canvas
=
document.
querySelector(
'
#canvas
');
var
ctx
=
canvas.
getContext(
'
2d
'); /** 这里是创建自己的画布 */
第二步：(前方高能) 开始制作验证码了
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));/*把随机渠道的数字写到我们的画布上*/
}
第三步：介绍一下里面的 randColor 方法 这个不必多说，传入最大值最小之的区间取值
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
+
'
)
';
}
第四步：说一下randNum 这个方法 其实和上面的方法相同 都是传入最大值最小值的取值区间
function
randNum(
min,
max) {
var
num
=
Math.
floor(
Math.
random()
* (
max
-
min
+
1)
+
min);
return
num;
}
那么就先说到这里，下一篇来说说怎么绘制干扰图形