canvas底紋隨機驗證碼製作

阿新 • • 發佈：2018-11-13

一、HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #mycanvas{
                border: 1px solid;
                margin-top: 10px;
                margin-left: 90px;
            } 

        </style>
    </head>
    <body>
        <form method="get" onsubmit="return yanzheng()"> 驗證碼：
            <input type="text" name="num" id="yzm" />
            <input type="submit" value="提交"  onclick="return yanzheng()"/>
            <br />
        </form 
>

        <canvas id="mycanvas" onclick="shengchengyzm()"></canvas>

        <script type="text/javascript">
            var hb;
            window.onload=function(){
                var mycanvas=document.getElementById("mycanvas");
                mycanvas.width=100;
                mycanvas.height=40 
;
                hb=mycanvas.getContext("2d");
                hb.fillStyle=getcolor();
                hb.fillRect(0,0,100,40);
            }
            function shengchengyzm(){
                hb.beginPath();
                var ran=parseInt(Math.random()*10000)%900000+100000;
                hb.font="20px 微軟雅黑";
                hb.fillStyle=getcolor();
                hb.fillText(ran,15,28);
                //干擾線
                for (var i = 0; i < 20; i++) {
                    hb.beginPath();
                    var w=parseInt(Math.random()*10000)%mycanvas.width;
                    var h=parseInt(Math.random()*10000)%mycanvas.height;
                    hb.moveTo(w,h);
                    w=parseInt(Math.random()*10000)%mycanvas.width;
                    h=parseInt(Math.random()*10000)%mycanvas.height;
                    hb.lineTo(w,h);
                    hb.strokeStyle=getcolor();
                    hb.stroke();
                }
                //干擾點
                for (var i = 0; i <100; i++) {
                    hb.beginPath();
                    var w=parseInt(Math.random()*10000)%mycanvas.width;
                    var h=parseInt(Math.random()*10000)%mycanvas.height;
                    hb.moveTo(w,h);
                    hb.lineTo(w+1,h+1);
                    hb.strokeStyle=getcolor();
                    hb.stroke();
                }
                //蒙版
                hb.beginPath();
                hb.fillStyle="rgba(255,255,0,0.4)";
                hb.fillRect(0,0,100,40);
            };
            function getcolor(){
                var r=parseInt(Math.random()*10000)%256;
                var g=parseInt(Math.random()*10000)%256;
                var b=parseInt(Math.random()*10000)%256;
                return "rgb("+r+","+g+","+b+")";
            }
            function yanzheng(){
                return false;
            }
        </script>
    </body>
</html>

二、效果圖
這裡寫圖片描述

canvas底紋隨機驗證碼製作

一、HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> &l

底紋隨機驗證碼之canvas

一、程式碼說明：純用canvas畫出來的六位隨機驗證碼，並且有底紋和模糊點，提高資訊保安性。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

用Canvas生成隨機驗證碼(後端前端都可以)

ntb inf pre text contex back data listen nload 一、使用前端生成驗證碼 <!DOCTYPE html> <html> <head> <meta charse

微信小程序 canvas 生成隨機驗證碼

微信 font mco 字體顏色字體大小 sdn 隨機 ref radi https://blog.csdn.net/qq_16646819/article/details/81020245?utm_source=blogxgwz0 js 1 // pages/

使用JavaScript實現製作網頁隨機驗證碼

1: getCode.js /** * 產生隨機數的函式 */ function validateCode(n){ //驗證碼可能包含的字元 var s="abcdefghijklmn

簡單而且好用的隨機驗證碼

-s 驗證 tro args nbsp ati num print system public static void main(String[] args){ Random d = new Random(); String str = ""; for(int i=0;i

Django之路 - 實現登錄隨機驗證碼

短信祝福 python 中間件程序檢測登錄驗證碼是每個網站登錄時的基本標配，網上也有很多相應的文章，但是從生成驗證碼到應用到自己的網站上的全步驟，並沒有看到很多，為了節約大家的時間，我把整體步驟寫下來，即拿即用哈 1. 生成隨機驗證碼隨機驗證碼代碼 2. 如何應用到你的dj

生成6位的隨機驗證碼

bsp 生成 current 實例 imp import style += range 要求：生成6位的字母和數字組成的隨機驗證碼。實例1： 1 import random 2 identify_code=‘‘ 3 for i in range(1): 4

Python 生成隨機驗證碼

安裝 alt rndc 字母 .text key red 圖片查看 fill Python生成隨機驗證碼 Python生成隨機驗證碼，需要使用PIL模塊. 安裝： 1 pip3 install pillow 基本使用 1. 創建圖片

生成隨機驗證碼的方法

隨機驗證碼 clas pan 我們 -s string elif else 驗證 1、借助列表 import random def random_code(): random_list = [] for i in range(4): ra

實現隨機驗證碼

cnblogs 驗證 pri str 隨機驗證碼 size rand 實現 tro 　　　　　　　　　　實現隨機驗證碼 1 #生成隨機驗證碼 2 import random 3 temp = "" 4 for i in range(6): 5 num =

python登錄加隨機驗證碼校驗程序(裝飾器內置函數的理解）

python 裝飾器內置函數登錄驗證驗證碼使用說明：為了防止惡意攻擊，同時不對原先用戶登錄驗證的方法代碼進行改動，在檢驗賬號密碼方法外再套一層校驗方法（驗證碼），過濾非人為的攻擊。代碼如下：#!/usr/bin/env python # -*- coding:utf-8 -*- import os im

Javascript隨機驗證碼

javascrip utf-8 code var asc return valid and ++ <!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><t

隨機驗證碼

randint 隨機 span col color dom kde else pre import randomcheckde=‘‘# for i in range(4):# current = random.randint(1,9) #選取1-9的數字##

畫布實現隨機驗證碼

add 等於得到 fse abc div for baseline def 1. html模板: 1 <div class="c-code"> 2 <canvas id="c-cvs"></canvas> 3 </div

隨機驗證碼-賬號密碼驗證

位數撒旦 cti asa username -c 用戶隨機驗證碼 title 一、默認賬號密碼為admin 驗證正確然後繼續驗證驗證碼==隨機驗證碼全部正確跳轉login.html 重點:Math.random(0-1)隨機獲取0-1的隨機數 <!DOCTY

C#產生隨機驗證碼的代碼

toa 指定 nload dll bit resp static rectangle 設置 using System; using System.Collections.Generic; using System.Linq; using System.Web

5、簡單隨機驗證碼的生成練習

for 設定 src png log 大寫 cnblogs style 驗證 import random # 設定一個空字符串 st = "" # 遍歷6次函數 for i in range(6): # 設定一個隨機變量0或1 i1 = random.ra

登錄驗證隨機驗證碼的實現

tro import csrf 驗證碼 upper pen use cati 用戶驗證今天我們來學習登錄驗證中，如何生成隨機驗證碼？驗證碼使用基本都是找現成的組件來實現，用代碼實現這個簡單功能主要是了解了解驗證碼內部的實現。友情鏈接生成隨機驗證碼基本流程：http:/

canvas底紋隨機驗證碼製作

一、HTML

相關推薦