移动端开发时拿到一个【用户签字确认功能】的需求,我这边使用的 Canvas 来记录用户的写字轨迹,达到储存签字照片的功能。
以下是下来参照这个需求做的一个简单demo,希望能够对大家有所帮助~~~~~~~~
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" type="text/css" href="../css/global.css">
<title>Document</title>
</head>
<body>
<div id="canvas">
<p id='tip'>请签字确认:</p>
<p id="clearCanvas">重写</p>
<p id="saveCanvas">确认签字</p>
</div>
</body>
<script type="text/javascript" src="../lib/jquery.1.11.3.min.js"></script>
<script type="text/javascript">
let clafn;
window.onload = function() {
new lineCanvas({
el: document.getElementById("canvas"), //绘制canvas的父级div
clearBtn: document.getElementById("clearCanvas"), //清除按钮
saveBtn: document.getElementById("saveCanvas"), //保存按钮
//linewidth:1,//线条粗细,选填
//color:"black",//线条颜色,选填
//background:"#ffffff"//线条背景,选填
});
clafn;
};
function lineCanvas(obj) {
this.linewidth = 1;
this.color = "#000000";
this.background = "#ffffff";
for (var i in obj) {
this[i] = obj[i];
};
this.canvas = document.createElement("canvas"); //创建 canvas 标签
this.el.appendChild(this.canvas); //将 canvas 标签添加到 body 中去
this.cxt = this.canvas.getContext("2d");
this.canvas.width = this.el.clientWidth;
this.canvas.height = this.el.clientHeight;
this.cxt.fillStyle = this.background; //设置图形的填充颜色
this.cxt.fillRect(0, 0, this.canvas.width, this.canvas.width); //绘制一个填充的矩形(默认填充色黑色)
this.cxt.strokeStyle = this.color; //设置图形轮廓的颜色
this.cxt.lineWidth = this.linewidth; //设置线的粗细,默认为1,即往上0.5,往下0.5
this.cxt.lineCap = "round";
//先清除画布,疑问??????
clafn = this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height); //clearRect(x,y,width,height)清除指定矩形区域,本质让指定区域完全透明,但不包括边框
//开始绘制
this.canvas.addEventListener("touchstart", function(e) {
this.cxt.beginPath(); //ctx.beginPath()清空以前的路径
this.cxt.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY); //ctx.moveTo(50,50)移到路径起始点
}.bind(this), false);
//绘制中
this.canvas.addEventListener("touchmove", function(e) {
this.cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY); // ctx.lineTo(50,100)第一条路径
this.cxt.stroke(); // stroke() 画出路径
}.bind(this), false);
//结束绘制
this.canvas.addEventListener("touchend", function() {
this.cxt.closePath(); // closePath() 合并路径
}.bind(this), false);
//清除画布
this.clearBtn.addEventListener("click", function() {
this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height); //clearRect(x,y,width,height)清除指定矩形区域,本质让指定区域完全透明,但不包括边框
}.bind(this), false);
//保存图片,直接转base64
this.saveBtn.addEventListener("click", function() {
var imgBase64 = this.canvas.toDataURL();
console.log(imgBase64);
}.bind(this), false);
};
</script>
</html>
CSS:
body,
html {
width: 100%;
height: 100%;
}
#canvas {
width: 100%;
height: 100%;
/* background-color: #eeeeee; */
position: relative;
}
#canvas canvas {
display: block;
}
#tip {
position: absolute;
font-size: 0.4rem;
font-weight: bolder;
color: #969494;
top: 0.5rem;
left: 0.5rem;
}
#clearCanvas {
width: 50%;
height: 40px;
line-height: 40px;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
border: 1px solid #DEDEDE;
z-index: 1;
font-size: 0.28rem;
}
#saveCanvas {
width: 50%;
height: 40px;
line-height: 40px;
text-align: center;
position: absolute;
background-color: #4894e1;
color: #ffffff;
font-size: 0.28rem;
bottom: 0;
right: 0;
border: 1px solid #DEDEDE;
z-index: 1;
}
更多canvas属性可以参考 点击这里学习Canvas标签讲解
确认后验证canvas是否为空
js代码:
//验证canvas画布内容是否为空的函数
function isCanvasBlank(canvas) {
//创建一个新的canvas对象
var blank = document.createElement('canvas');
blank.width = canvas.width;
blank.height = canvas.height;
//与小提琴相同的功能
//blank.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
//一个是白色背景,另一个是透明的
//var ctxw = blank.getContext("2d");
//ctxw.fillStyle = "#ffffff";
//ctxw.fillRect(0, 0, blank.width, blank.height);
return canvas.toDataURL() == blank.toDataURL();//比较Boolean值,返回true则为空
}
//调用
function checkEmpty() {
// 获取HTML中的canvas对象
var c=document.getElementById("canvas");
if(isCanvasBlank(c)){
console.log("请签名后再上传!");
return;
}
});