canvas實現的驗證碼效果程式碼例項

admin發表於2017-02-21
Canvas
驗證碼通常是圖片形式的，canvas恰好就是繪圖的，所以使用canvas實現驗證碼效果也是一種選擇。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<canvas id="canvas" width="150" height="50"></canvas>
<script>
function randomNum(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}
 
function randomColor(min, max) {
  var _r = randomNum(min, max);
  var _g = randomNum(min, max);
  var _b = randomNum(min, max);
  return "rgb(" + _r + "," + _g + "," + _b + ")";
}
document.getElementById("canvas").onclick = function(e) {
  e.preventDefault();
  drawPic();
};
 
function drawPic() {
  var $canvas = document.getElementById("canvas");
  var _str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  var _picTxt = "";
  var _num = 6;
  var _width = $canvas.width;
  var _height = $canvas.height;
  var ctx = $canvas.getContext("2d");
  ctx.textBaseline = "bottom";
  ctx.fillStyle = randomColor(180, 240);
  ctx.fillRect(0, 0, _width, _height);
  for (var i = 0; i < _num; i++) {
    var x = (_width - 10) / _num * i + 10;
    var y = randomNum(_height / 2, _height);
    var deg = randomNum(-45, 45);
    var txt = _str[randomNum(0, _str.length)];
    _picTxt += txt;
    ctx.fillStyle = randomColor(10, 100);
    ctx.font = randomNum(16, 40) + "px SimHei";
    ctx.translate(x, y);
    ctx.rotate(deg * Math.PI / 180);
    ctx.fillText(txt, 0, 0);
    ctx.rotate(-deg * Math.PI / 180);
    ctx.translate(-x, -y);
  }
  for (var i = 0; i < _num; i++) {
    ctx.strokeStyle = randomColor(90, 180);
    ctx.beginPath();
    ctx.moveTo(randomNum(0, _width), randomNum(0, _height));
    ctx.lineTo(randomNum(0, _width), randomNum(0, _height));
    ctx.stroke();
  }
  for (var i = 0; i < _num * 10; i++) {
    ctx.fillStyle = randomColor(0, 255);
    ctx.beginPath();
    ctx.arc(randomNum(0, _width), randomNum(0, _height), 1, 0, 2 * Math.PI);
    ctx.fill();
  }
  return _picTxt;
}
drawPic();
</script>
</body>
</html>

相關文章