如何用canvas实现在线签名的示例代码

随着计算机和网络技术的飞速发展,在线签名技术越来越多的被应用在无纸化办公中,这种直观便利的操作不仅可以大幅提升办公效率,而且使用数字化存储方式,避开了传统的纸质签字存储查阅困难等问题。在我们在日常生活中,已经有很多场景使用在线签名技术,例如:pos机刷卡签字、快递签收签字、银行或机关单位业务办理签字等。最近在做公司的业务办理需求,里面也涉及到在线签名,我们采用的 Canvas 技术实现,接下来,让我们来聊聊如何使用 Canvas 实现在线签名吧!

什么是 Canvas?

Canvas 是 HTML5 新增的元素,用于在网页上绘制图形,它由 Apple 在 Safari 1.3 Web 浏览器中引入,之所以对 HTML 扩展的原因在于, HTML 在 Safari 中的绘图能力能为 Mac OS X 桌面的 Dashboard 组件所使用,并且 Apple 也希望有一种方式可以在 Dashboard 中支持脚本化的图形。Firefox 1.5 和 Opera 9 这两个浏览器也紧随 Safari 的引领,开始支持 Canvas 。

现在,Canvas 标签已经是 HTML5 最伟大的改进之一,因为它可以让我们在不使用图片的情况下实现网页的图形设计。它就像一块画布,本身没有绘制能力,但却把绘制 API 展现给客户端 JavaScript,我们借助 JavaScript 的支持,在画布范围内尽情发挥,达到想要的效果。

技术选型

这个功能无论是 Canvas、SVG 或是 Flash,都可以实现,但是我们为什么选择了 Canvas 呢?

首先,由于功能上我们需要支持移动平台,所以 Flash 我们就可以直接弃掉,它在移动端方面并没有得到友好的支持,但 Canvas 和 SVG 都具有很好的跨平台能力,我们如何抉择,下面我们来对比一下。

  •  Canvas 基于像素,提供 2D 绘制函数,提供的功能更原始,适合像素处理、动态渲染和大数据量绘制,可控性高,绘制完了基本不记录过程,绘图性能会更好一点,各大厂商也早都实现了canvas的硬件加速机制。  
  • SVG 为矢量,提供一系列图形元素,功能更完善,建立了一大堆可交互对象,本性长于交互,但性能会弱些,更适合静态图片展示,高保真文档查看和打印的应用场景。

两者各有自己的擅长领域, 基于以上,我们选择了 Canvas 来实现签字功能。

下面,我们来看一下实现效果。

但是,我们发现绘制的线条比较生硬

这时,我们可以通过 lineCap 改变线条末端线帽的样式,为每个末端添加圆形线帽,减少线条的生硬感

cxt.lineCap = 'round';

同时,我们还可以通过设置 lineJoin,指定条线交汇时为圆形边角

cxt.lineJoin = 'round';

但我们又发现,绘制的线条有明显的锯齿,此时我们就需要借助 Canvas 为我们提供的绘制元素阴影的功能来模糊边缘出现的锯齿,因为有阴影,所以我们可以适当改变 lineWidth 值

cxt.shadowBlur = 1;
cxt.shadowColor = '#000';

是不是变得圆润很多,到这里,我们绘制线路的方法已经准备完事,接下来我们来看一下怎么监听画布事件来实现连贯执行绘制吧!

监听画布事件

因为我们需要同时兼容 PC 端和移动端,所以我们需要事先需要判断一下对应执行的事件

this.state = {
events: ('ontouchstart' in window) ? ['touchstart', 'touchmove', 'touchend'] : ['mousedown', 'mousemove', 'mouseup']
}

在画布初始化之后,我们开始监听 events[0] 事件

this.canvas.addEventListener(this.events[0], startEventHandler, false);

在startEventHandler函数中监听 events[1] 和 events[2] 事件

this.canvas.addEventListener(events[1], moveEventHandler, false);
this.canvas.addEventListener(events[2], endEventHandler, false);

重点来了,我们核心的内容就是计算、描绘划过的路径

moveEventHandler(event: any): void {
    event.preventDefault();
    const {ctx, isSupportTouch} = this.state;
    const evt = isSupportTouch ? event.touches[0] : event;
    const coverPos = this.canvas.getBoundingClientRect();
    const mouseX = evt.clientX - coverPos.left;
    const mouseY = evt.clientY - coverPos.top;
    cxt.lineTo(
       mouseX,
       mouseY
    );
    cxt.stroke();
}

如何用canvas实现在线签名的示例代码

扫一扫手机访问