前端开发一个canvas写的验证码

前端开发常用字体下载

web前端开发书籍下载

web前端开发入门书下载

html 代码

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

function randomNum(min, max) {

return Math.floor(Math.random() * (max – min) + min)

}

function randomColor(min, max) {

var _r = randomNum(min, max)

var _g = randomNum(min, max)

var _b = randomNum(min, max)

return ‘rgb(‘ + _r + ‘,’ + _g + ‘,’ + _b + ‘)’

}

document.getElementById(‘canvas’).onclick = function(e) {

e.preventDefault()

drawPic()

}

function drawPic() {

var $canvas = document.getElementById(‘canvas’)

var _str =

‘ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789’

var _picTxt = ”

var _num = 6

var _width = $canvas.width

var _height = $canvas.height

var ctx = $canvas.getContext(‘2d’)

ctx.textBaseline = ‘bottom’

ctx.fillStyle = randomColor(180, 240)

ctx.fillRect(0, 0, _width, _height)

for (var i = 0; i < _num; i++) {

var x = ((_width – 10) / _num) * i + 10

var y = randomNum(_height / 2, _height)

var deg = randomNum(-45, 45)

var txt = _str[randomNum(0, _str.length)]

_picTxt += txt

ctx.fillStyle = randomColor(10, 100)

ctx.font = randomNum(16, 40) + ‘px SimHei’

ctx.translate(x, y)

ctx.rotate((deg * Math.PI) / 180)

ctx.fillText(txt, 0, 0)

ctx.rotate((-deg * Math.PI) / 180)

ctx.translate(-x, -y)

}

for (var i = 0; i < _num; i++) {

ctx.strokeStyle = randomColor(90, 180)

ctx.beginPath()

ctx.moveTo(randomNum(0, _width), randomNum(0, _height))

ctx.lineTo(randomNum(0, _width), randomNum(0, _height))

ctx.stroke()

}

for (var i = 0; i < _num * 10; i++) {

ctx.fillStyle = randomColor(0, 255)

ctx.beginPath()

ctx.arc(

randomNum(0, _width),

randomNum(0, _height),

2 * Math.PI,

)

ctx.fill()

}

return _picTxt

}

drawPic()

</script>

</body>

</html>

web前端开发源代码免费下载

前端开发浏览器下载

web前端开发模板下载

前端开发一个canvas写的验证码

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发