利用canvas制作一个随机验证码：
1、clearRect：context.clearRect(x,y,width,height);清空给定矩形内的指定像素
2、fillStyle：设置画笔的颜色
3、rotate(deg)：旋转角度，以弧度旋转(弧度=degrees*Math.PI/180 )
4、translate()： 方法重新映射画布上的位置
5、Math.random()：获取0-1之间的一个随机数，不包含1
<!-- HTML -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas随机验证码</title>
</head>
<body>
<canvas id="canvas" width="100" height="40" style="border: 1px solid red;display: block;margin: 0 auto;"></canvas>
</body>
<script type="text/javascript">
var myCanvas = document.querySelector("#canvas");
var blur = myCanvas.getContext("2d");
// 当点击画布时创建一个新的路径
// 验证码封装
myCanvas.onclick = function() {
// 实现点击画布创建一个新的验证码
blur.clearRect(0,0,100,40);
verify();
}
verify();
function verify() {
// 绘制矩形框
// blur.strokeRect(0,0,100,40);
// 随机验证码
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "s", "t", "u",
"v", "w", "x", "y", "z", "A", "B", "C", "D", "F", "G", "H", "I", "J", "K", "L", "S", "T", "U", "V", "W", "X", "Y",
"Z"
];
// 显示四位数的验证码
for (var i = 0; i < 4; i++) {
var x = 20 + 20 * i;
var y = 20 + 10 * Math.random();
// console.log(x,y);
// 在数组中获取到随机的索引整数
var index = Math.floor(Math.random() * arr.length);
// 通过随机的索引获取到随机的元素
var texts = arr[index];
// 设置验证码的相关样式
blur.font = "bold 20px 微软雅黑";
blur.fillStyle = textColor();
// 画布旋转显示
// translate() 方法重新映射画布上的位置
blur.translate(x, y);
// 将画布旋转，旋转角度，以弧度旋转(弧度=degrees*Math.PI/180 )
var deg = 90 * Math.random() * Math.PI / 180;
blur.rotate(deg); //
blur.fillText(texts, 0, 0);
// 将画布映射返回原来的位置
blur.rotate(-deg);
blur.translate(-x, -y);
}
// 制作验证码的干扰线制作
for(var i=0;i<6;i++){
blur.beginPath();
blur.moveTo(Math.random()*100,Math.random()*40);
blur.lineTo(Math.random()*100,Math.random()*40);
// 设置干扰线的颜色
blur.strokeStyle=textColor();
blur.stroke();
}
// 制作验证码的干扰圆点
for(var i=0;i<20;i++){
blur.beginPath();
var x=Math.random()*100;
var y=Math.random()*100;
blur.moveTo(x,y);
blur.lineTo(x+1,y+1);
// 设置干扰线的颜色
blur.strokeStyle=textColor();
blur.stroke();
}
}
// 获取随机颜色封装
function textColor(){
var red=Math.floor(Math.random()*256);
var green=Math.floor(Math.random()*256);
var blue=Math.floor(Math.random()*256);
return "rgb("+red+","+green+","+blue+")";
}
</script>
</html>
| x | 要清除的矩形左上角的 x 坐标 |
| y | 要清除的矩形左上角的 y 坐标 |
| width | 要清除的矩形的宽度，以像素计 |
| height | 要清除的矩形的高度，以像素计 |
