html代码:
<canvas id="canvas" width="120" height="30" onclick="verificationCode()"></canvas>
js代码:
verificationCode()
function verificationCode() {
// 随机数生成函数
function rn(min, max) {
return parseInt(Math.random()*(max-min)+min)
}
// 随机生成颜色的函数
function rc(min, max) {
var r = rn(min, max)
var g = rn(min, max)
var b = rn(min, max)
var str = 'rgb('+ r +", "+ g +', '+ b +")"
return str
}
var w = 120
var h = 30
var canvas = document.querySelector('#canvas')
var ctx = canvas.getContext('2d')
// 在canvas上绘制背景颜色
ctx.fillStyle = rc(180,230)
ctx.fillRect(0,0,w,h)
// 随机字符串
var pool = 'ABCDEFGHIGKLMNOPQRSTUVWXYZ1234567890'
for(var i=0; i<4; i++) {
// 取出随机的字母或数字
var c = pool[rn(0,pool.length)]
// 随机出字体大小
var fs = rn(14,30)
// 随机字符旋转角度
var deg = rn (-30, 30)
ctx.font = fs+'px Simhei'
ctx.textBaseline = 'top'
// 设置字体填充颜色
ctx.fillStyle = rc(80, 150)
ctx.save()
ctx.translate(30*i+15,15)
ctx.rotate(deg*Math.PI/180)
ctx.fillText(c, -10, -10)
ctx.restore()
}
// 随机生成5条干扰线
for(var i=0; i<5; i++) {
ctx.beginPath()
ctx.moveTo(rn(0,w), rn(0,h))
ctx.lineTo(rn(0,w), rn(0,h))
ctx.strokeStyle = rc(180,230)
ctx.closePath()
ctx.stroke()
}
// 随机生成40个干扰点
for(var i=0; i<40; i++) {
ctx.beginPath()
ctx.arc(rn(0,w),rn(0,h),1,0,2*Math.PI)
ctx.closePath()
ctx.fillStyle = rc(150,200)
ctx.fill()
}
}