当前位置：网站首页>Generate verification code

Generate verification code

2022-07-21 12:52:00 【orange_?】

Front end generation

Write your thoughts in two days when you are free , Optimize
Insert picture description here 

<html>
  <head></head>
  <style> </style>
  <body>
    <canvas id="code" width="110" height="40" onclick="draw()"></canvas>
  </body>
  <script> //  Randomly generate colors  function rgb (l, r) {
       const choie = r - l + 1 let color = 'rgb(' for (let i = 1; i <= 3; ++i) {
       const ran = Math.floor(Math.random() * choie + l) color = color + ran + ',' } color = color.substring(0, color.length - 1) color += ')' return color } var code = 'qwertyuiopasdfghjklzxcvbnm' function draw () {
       const convas = document.getElementById('code') const ctx = convas.getContext('2d') ctx.clearRect(0, 0, 110, 40) ctx.beginPath() ctx.lineWidth = 1 ctx.fillStyle = rgb(160, 233) ctx.fillRect(0, 0, 110, 40) ctx.moveTo(0, Math.random() * 40) ctx.quadraticCurveTo(10, 10, 110, Math.random() * 40) ctx.strokeStyle = rgb(100, 140) ctx.stroke() ctx.moveTo(0, Math.random() * 40) ctx.quadraticCurveTo(20, 50, 110, Math.random() * 40) ctx.strokeStyle = rgb(1, 140) ctx.stroke() ctx.font = '20px Georgia' ctx.textAlign = 'center' ctx.textBaseline = 'middle' for (let i = 1; i <= 4; i++) {
       ctx.fillStyle = rgb(100, 130) ctx.fillText(code.substr(Math.floor(Math.random() * code.length), 1), 22 * i, 20) } } window.onload = function () {
       draw() } </script>
</html>
原网站

版权声明
本文为[orange_?]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/202/202207201745420493.html

边栏推荐

猜你喜欢

随机推荐