您现在的位置是:主页 > 网站制作 > Js经典实例 >

前台页面短信验证码

刘清2019-06-16 23:02个人博客人已围观

简介canvas id=canvas width=120 height=40/canvas script var canvas = document.getElementById(canvas);//演员 var context = canvas.getContext(2d);//舞台 draw(); canvas.onclick = function () { context.clearRect(0, 0, 120, 40); draw(); } functio











 <canvas id="canvas" width="120" height="40"></canvas>
    <script>
        var canvas = document.getElementById("canvas");//演员
        var context = canvas.getContext("2d");//舞台
        draw();
        canvas.onclick = function () {
            context.clearRect(0, 0, 120, 40);
            draw();
        }
        function getColor() {
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return "rgb(" + r + "," + g + "," + b + ")";
        }
        function draw() {
            context.strokeRect(0, 0, 120, 40);
            var aCode = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
            for (var i = 0; i < 4; i++) {
                var x = 20 + i * 20;
                var y = 20 + 10 * Math.random();
                var index = Math.floor(Math.random() * aCode.length);//随机索引值
                var txt = aCode[index];
                context.font = "bold 20px 微软雅黑";
                context.fillStyle=getColor();
                context.translate(x,y);
                var deg=90*Math.random()*Math.PI/180;
                context.rotate(deg);
                context.fillText(txt, 0, 0);
                context.rotate(-deg);
                context.translate(-x,-y);
            }
            for (var i = 0; i < 8; i++) {
                context.beginPath();
                context.moveTo(Math.random() * 120, Math.random() * 40);
                context.lineTo(Math.random() * 120, Math.random() * 40);
                context.strokeStyle=getColor();
                context.stroke();
            }
            for (var i = 0; i < 20; i++) {
                context.beginPath();
                var x = Math.random() * 120;
                var y = Math.random() * 40;
                context.moveTo(x, y);
                context.lineTo(x + 1, y + 1);
                context.strokeStyle=getColor();
                context.stroke();
            }
        }
 
    </script>

参考文档 对象

Tags:    格子短信   

很赞额!(74)

上一篇:dom对象控制html元素

下一篇:没有了

文章评论

站点信息

  • 建站时间:2018-12-1
  • 网站程序:织梦cms
  • 主题模板《今夕何夕》
  • 文章统计:299条
  • 文章评论:490条
  • 统计数据百度统计