canvas 制作验证码

时间:2021-05-22 13:11:12

写之前还是需要给不懂的朋友复制粘贴一些API的内容canvas 制作验证码

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

那么就先说到这里,下一篇来说说怎么绘制干扰图形