验证码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#canvas{
background: #313847;
margin: 0 auto;
display: block;
margin-top: 200px;
}
</style>
</head>
<body>
<canvas id="canvas" width="200" height="50"></canvas>
</body>
<script>
var canvas=document.getElementById('canvas');
var cv=canvas.getContext('2d');
cv.font='30px arial';
var words='QWERRTYUIOPASDFGHJKLZXCVBNM';
for(var i=0;i<4;i++){
var num=Math.floor(Math.random()*(words.length-1+1-0)+0);
//随机位置
var l=Math.floor(Math.random()*((i*50+20)+1-i*50)+i*50);
var t=Math.floor(Math.random()*(45+1-30)+30);
var r=Math.floor(Math.random()*256);
var g=Math.floor(Math.random()*256);
var b=Math.floor(Math.random()*256);
cv.fillStyle='rgb('+r+','+g+','+b+')';
//随机角度
var d=Math.floor(Math.random()*(5+1+5)-5);
cv.rotate(d*Math.PI/180);
cv.fillText(words[num],l,t);
}
for(var i=0;i<10;i++){
var startx=Math.floor(Math.random()*201);
var starty=Math.floor(Math.random()*51);
var endx=Math.floor(Math.random()*201);
var endy=Math.floor(Math.random()*51);
cv.beginPath();
cv.moveTo(startx,starty);
cv.lineTo(endx,endy);
cv.closePath();
var r=Math.floor(Math.random()*256);
var g=Math.floor(Math.random()*256);
var b=Math.floor(Math.random()*256);
var o=Math.floor(Math.random()*101);
cv.strokeStyle='rgba('+r+','+g+','+b+','+o/100+')';
cv.stroke();
}
</script>
</html>
