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

前端开发常用字体下载
web前端开发书籍下载
web前端开发入门书下载

html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”UTF-8″ />
        <title>Document</title>
    </head>
    <body>
        <canvas id=”canvas” width=”150″ height=”50″></canvas>
        <script>
            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),
                        1,
                        0,
                        2 * Math.PI,
                    )
                    ctx.fill()
                }
                return _picTxt
            }
            drawPic()
        </script>
    </body>
</html>
web前端开发源代码免费下载
前端开发浏览器下载
web前端开发模板下载
» 本文来自:前端开发者 » 《前端开发一个canvas写的验证码》
» 本文链接地址:https://www.rokub.com/7984.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!