zoukankan      html  css  js  c++  java
  • HTML5 canvas绘制验证码

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
      <h1>canvas绘制验证码</h1>
      <canvas id="randomCode" width="150px;" height="50px" style="border:1px solid #bbbbbb;cursor: pointer;" title="点击更换验证码">
      </canvas>
      <script>
        var c=document.getElementById("randomCode");
        var w=c.offsetWidth;
        var h=c.offsetHeight;
        randomStr();
        function randomStr(){
          var ctx=c.getContext('2d');
          ctx.clearRect(0,0,150,150);    //先清除canvas画布
          var Letter="ABCDEFGHIJKLMNOPQRSTUVWHYZ1234567890";
          Letter=Letter.split('');
          for(let i=0;i<4;i++){
            var char=Letter[Math.floor(Math.random()*36)];
            var fs=returnNum(30,60);//字体的大小
            var deg=returnNum(-30,30);//字体的旋转角度
            ctx.font=fs+'px Simhei';
            ctx.textBaseline="top";
            ctx.fillStyle=randomColor();
            ctx.save();
            ctx.translate(30*i+15,15);
            ctx.rotate(deg*Math.PI/180);
            ctx.fillText(char,-15+5,-15);
            ctx.restore();
          }
          for(let q=0;q<6;q++){
            ctx.beginPath();
            ctx.lineWidth="1";
            ctx.strokeStyle=randomColor(); // Green path
            ctx.moveTo(returnNum(0,w),returnNum(0,h));
            ctx.lineTo(returnNum(0,w),returnNum(0,h));
            ctx.stroke(); // Draw it
          }
        }
        function randomColor(){
          color = '#'+Math.floor(Math.random()*16777215).toString(16);  
          if(color.length==6){
            color+="0"
          }
          return color;
        }
        function returnNum(min,max){
          return  parseInt(Math.random()*(max-min)+min);
        }
        c.addEventListener("click",function(){
          randomStr()
        })
      </script>
    </body>
    </html>
  • 相关阅读:
    xsos:一个在Linux上阅读SOSReport的工具
    RHEL sosreport
    sosreport -a --report
    环境变量
    读研重要的是要明白你自己要干什么, 不能等导师来告诉你你应该干什么. 研究生的优势在于理论功底深厚, 思维具有穿透力,
    awk sed grep 常用命令
    如何删除文件中的空行
    Vim删除空行
    WPS 2010 页眉下方添加下划线
    Android开发环境搭建
  • 原文地址:https://www.cnblogs.com/banyuege/p/11158720.html
Copyright © 2011-2022 走看看