前端图片验证码

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()
		}
	}