效果图
概述
在线签名,现在在很多场景下都能看到,而且在移动端见的比较多。
用canvas
和svg
都可以实现,而且跨平台能力也很好。
canvas
基于像素,提供 2D 绘制函数,提供的功能更原始,适合像素处理、动态渲染和大量数据绘制,可控性高,绘制完了基本不记录过程,绘图性能会更好一点,各大厂商也早都实现了canvas
的硬件加速机制。而且能够以.png
或.jpg
格式保存结果图像svg
为矢量,提供一序列图形元素,功能更完善,建立了一大堆可交互对象,本性长于交互,但性能会弱些,更适合静态图片展示,高保真文档查看和打印的应用场景。
两者各有自己擅长的领域,基于以上,以下是用canvas
实现的移动端签字功能。从创建、设置、监听绘制、重绘、保存等进行处理。
代码
==html结构==
清除
保存
==css样式==
html,
body {
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
#canvas {
position: relative;
width: 100%;
height: 100%;
}
#canvas canvas {
display: block;
}
#clearCanvas,
#saveCanvas {
position: absolute;
bottom: 0;
z-index: 1;
width: 50%;
height: 40px;
border: 1px solid #dedede;
line-height: 40px;
text-align: center;
}
#clearCanvas {
left: 0;
}
#saveCanvas {
right: 0;
}
.errorCanvas {
width: 100%;
height: 100%;
text-align: center;
transform: translateY(40%);
}
==js内容==
window.onload = function () {
new lineCanvas({
el: document.querySelector('#canvas'),
clearEl: document.querySelector('#clearCanvas'),
saveEl: document.querySelector('#saveCanvas'),
// lineWidth: 1, // 线条粗细
// color: 'black', // 线条颜色
// background: '#fff'
});
}
function lineCanvas(obj) {
this.lineWidth = 5;
this.color = '#000';
this.background = '#fff';
for (var i in obj) {
this[i] = obj[i];
};
this.canvas = document.createElement('canvas');
if (!(this.canvas.getContext && this.canvas.getContext('2d'))) {
this.section = document.createElement('section');
this.section.className = 'errorCanvas';
this.section.innerHTML = '对不起,当前浏览器暂不支持此功能!'
this.el.prepend(this.section);
return
}
this.canvas.width = this.el.clientWidth;
this.canvas.height = this.el.clientHeight;
this.el.prepend(this.canvas);
this.cxt = this.canvas.getContext('2d');
this.cxt.fillStyle = this.background;
this.cxt.fillRect(0, 0, this.canvas.width, this.canvas.height);
this.cxt.strokeStyle = this.color;
this.cxt.lineWidth = this.lineWidth;
this.cxt.lineCap = 'round'; // 线条末端添加圆形线帽,减少线条的生硬感
this.cxt.lineJoin = 'round'; // 线条交汇时为原型边角
// 利用阴影,消除锯齿
this.cxt.shadowBlur = 1;
this.cxt.shadowColor = '#000';
// 开始绘制
this.canvas.addEventListener('touchstart', function (e) {
this.cxt.beginPath();
this.cxt.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
}.bind(this), false);
// 绘制中
this.canvas.addEventListener('touchmove', function (e) {
this.cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
this.cxt.stroke();
}.bind(this), false);
// 结束绘制
this.canvas.addEventListener('touchend', function (e) {
this.cxt.closePath();
}.bind(this), false);
// 清除画布
this.clearEl.addEventListener('click', function () {
this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
}.bind(this), false);
// 保存图片
this.saveEl.addEventListener('click', function () {
var imgBase64 = this.canvas.toDataURL();
var imgPng = this.canvas.toDataURL('image/png');
var imgJpg = this.canvas.toDataURL('image/jpeg', 0.8);
console.log(imgPng, imgJpg);
}.bind(this), false);
}
参考
- 如何用canvas实现在线签名的示例代码
- h5 利用canvas手写签名并保存