canvas 制作验证码

写之前还是需要给不懂的朋友复制粘贴一些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;

}

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