css3新特性canvas画网页二维码

最新推荐文章于 2024-06-28 17:37:52 发布

小白毛

最新推荐文章于 2024-06-28 17:37:52 发布

阅读量851

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_41876436/article/details/84401478

版权

本文介绍如何利用css3的新特性canvas结合js在网页上生成二维码。首先，验证码的数值由后台返回并存储在redis缓存中，前端通过input的value获取并判断。用户输入后，后台通过缓存进行校验。后台还可以控制图形二维码的开关，若开启，则在页面加载时通过单独的js函数请求生成二维码，input初始隐藏，有值时显示。

摘要由CSDN通过智能技术生成

更新一则js生成网页二维码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS生成验证码</title>
<style type="text/css">
.code {
	background-image: url(code.jpg);
	font-family: Arial;
	font-style: italic;
	color: Red;
	border: 0;
	padding: 2px 3px;
	letter-spacing: 3px;
	font-weight: bolder;
}
.unchanged {
	border: 0;
}
</style>
<canvas id="canvas" width="120" height="40"></canvas>
<a href="#" id="changeImg">看不清，换一张</a>
<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+")";
  }
  drawPic()