驗證碼:
建立緩存圖檔：指定寬width=90,height=30
擷取畫筆對象
設定畫筆顔色
填充矩形區域
從字元數組中随機得到字元 char[] arr = { ‘A’, ‘B’, ‘C’, ‘D’, ‘N’, ‘E’, ‘W’, ‘b’, ‘o’, ‘y’, ‘1’, ‘2’, ‘3’, ‘4’,‘5’,‘6’ };
循環4次，畫4個字元
設定字的顔色為随機
設定字型，大小為18，
将每個字元畫到圖檔，x增加，y不變。10+(i*20), 20
線的位置是随機的，x範圍在width之中，y的範圍在height之中。
畫8條幹擾線，每條線的顔色不同
将緩存的圖檔輸出到響應輸出流中
驗證碼Servlet代碼
@WebServlet(name = "PicCodeServlet", urlPatterns = "/code")
public class PicCodeServlet extends HttpServlet {
//建立一個随機類
private Random ran = new Random();
//寫一個方法随機生成一種顔色
private Color getRandomColor() {
//随機生成0~255之間的數
int red = ran.nextInt(256);
int green = ran.nextInt(256);
int blue = ran.nextInt(256);
//紅，綠，藍
return new Color(red, green, blue);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. 建立緩存圖檔
int width = 90, height = 30;
//參數：寬，高，圖檔模式
BufferedImage img = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
//2. 擷取畫筆對象
Graphics graphics = img.getGraphics();
//3. 設定畫筆顔色
graphics.setColor(Color.WHITE);
//4. 填充矩形區域
graphics.fillRect(0, 0, width, height);
//5. 從字元數組中随機得到字元
char[] arr = { 'A', 'B', 'C', 'D', 'N', 'E', 'W', 'b', 'o', 'y', '1', '2', '3', '4','5','6' };
//6. 循環4次，畫4個字元
for (int i = 0; i < 4; i++) {
//7. 設定字的顔色為随機
graphics.setColor(getRandomColor());
//8. 設定字型，大小為18
graphics.setFont(new Font(Font.SANS_SERIF,Font.BOLD+Font.ITALIC,19));
//随機得到下标
int index = ran.nextInt(arr.length);
char c = arr[index]; //随機得到一個字元
//9. 将每個字元畫到圖檔，x增加，y不變。
graphics.drawString(String.valueOf(c),10+(i*20), 20);
}
//11. 畫8條幹擾線，每條線的顔色不同
for (int i = 0; i < 8; i++) {
//10. 線的位置是随機的，x範圍在width之中，y的範圍在height之中。
int x1 = ran.nextInt(width);
int y1 = ran.nextInt(height);
int x2 = ran.nextInt(width);
int y2 = ran.nextInt(height);
graphics.setColor(getRandomColor());
graphics.drawLine(x1,y1,x2,y2);
}
//12. 将緩存的圖檔輸出到響應輸出流中
//參數：圖檔對象,圖檔格式，輸出流
ImageIO.write(img,"jpg",response.getOutputStream());
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
} }
登入是用來校驗效果怎麼樣，你們也可以直接拿到自己的項目裡試試效果，這個登入頁面随便找的一個校驗的，頁面效果比較醜，還有些樣式沒有導進來。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>登入頁面</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="max-width:400px">
<h3 style="text-align: center">使用者登入</h3>
<form action="login" method="post" >
<div class="form-group">
<label for="name">使用者名：</label>
<input type="text" name="name" class="form-control" id="name" placeholder="請輸入使用者名">
</div>
<div class="form-group">
<label for="password">密碼：</label>
<input type="password" name="password" class="form-control" id="password" placeholder="請輸入密碼"/>
</div>
<div class="form-inline">
<label for="vcode">驗證碼：</label>
<input type="text" name="vcode" class="form-control" id="vcode" placeholder="驗證碼" style="width: 70px" maxlength="4"/>
<!--驗證碼-->
<img id="imgCode" src="code" style="width: 90px; height: 30px; cursor: pointer;" title="看不清，點選重新整理">
<script type="text/javascript">
//圖檔點選事件
document.getElementById("imgCode").onclick = function () {
this.src = "code?t=" + new Date().getTime();
};
</script>
</div>
<div style="text-align: center; padding-top: 20px;">
<input type="submit" value=" 登 錄 " class="btn btn-primary"/>
</div>
</form>
</div>
</body>
</html> ![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)