项目需要,用到了canvas手写签名的功能,直接上代码
效果图:
css样式
#myCanvas{
width: 90%;
height: 150px;
border-radius: 10px;
margin: 10px 5% 5px 5%;
color:#ff6000;
background-color: #ffffff;
}
.btn-primary{
background-color:#5aa6e8;
color: #ffffff;
padding: 2px 5px;
border-radius: 6px;
margin-left: 5%;
font-size: 12px;
}
html代码
<canvas id="myCanvas"></canvas>
<div class="control-ops control">
<button type="button" class="btn btn-primary" onclick="javascript:clearArea();return false;">清空画板</button>
<button type="button" class="saveimg" onclick="javascript:saveImageInfo();return false;">保存</button>
</div>
js --可直接拿来用
var image='';
var mousePressed = false;
var lastX, lastY;
var ctx = document.getElementById('myCanvas').getContext("2d");
var c = document.getElementById("myCanvas");
// console.log(c)
// console.log(c2)
var control = document.getElementsByClassName("control")[0];
var saveimgs = document.getElementsByClassName("saveimgs")[0];
window.onload = function(){
var _width = $('#myCanvas').width();
$('#myCanvas').attr('width', _width); //适配移动端宽度给canvas
InitThis();
}
function saveImageInfo(){
image = c.toDataURL("image/png"); //得到生成后的签名base64位 url 地址
console.log(image);
}
function InitThis() {
// 触摸屏
c.addEventListener('touchstart', function (event) {
if (event.targetTouches.length == 1) {
event.preventDefault();// 阻止浏览器默认事件,重要
var touch = event.targetTouches[0];
mousePressed = true;
Draw(touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop, false);
}
},false);
c.addEventListener('touchmove', function (event) {
if (event.targetTouches.length == 1) {
event.preventDefault();// 阻止浏览器默认事件,重要
var touch = event.targetTouches[0];
if (mousePressed) {
Draw(touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop, true);
}
}
},false);
c.addEventListener('touchend', function (event) {
if (event.targetTouches.length == 1) {
event.preventDefault();// 阻止浏览器默认事件,防止手写的时候拖动屏幕,重要
// var touch = event.targetTouches[0];
mousePressed = false;
}
},false);
/*c.addEventListener('touchcancel', function (event) {
console.log(4)
mousePressed = false;
},false);*/
// 鼠标
c.onmousedown = function (event) {
mousePressed = true;
Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, false);
};
c.onmousemove = function (event) {
if (mousePressed) {
Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, true);
}
};
c.onmouseup = function (event) {
mousePressed = false;
};
}
function Draw(x, y, isDown) {
if (isDown) {
ctx.beginPath();
ctx.strokeStyle ='#ff6000'; //颜色
ctx.lineWidth = 3; //线宽
ctx.lineJoin = "round";
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
}
lastX = x; lastY = y;
}
function clearArea() {
// Use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
就是这样,可根据需要自行修改,比如生成的图片地址显示在页面上,设置线宽,颜色等