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

PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者无忌哥哥，侵删。

在我们在日常生活中，已经有很多场景使用在线签名技术，这篇文章主要介绍了如何用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 来实现签字功能。

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

了解了 Canvas 来源、技术选型和最终呈现效果，接下来、我们会从创建、绘制、监听、重绘、图片处理等五部分进行撰写，让我们一起走进 Canvas 绘制的世界。

创建画布

首先，我们需要判断浏览器是否支持 Canvas :

1

2

3

4

isCanvasSupported = (): boolean => {

    let elem = document.createElement('canvas');

    return !!(elem.getContext && elem.getContext('2d'));

}

然后根据判断结果选择创建 Canvas 画布还是展示提示

1

2

3

4

{isCanvasSupported ?

     <canvas ref={canvas => (this.canvas = canvas)} height={canvasHeight} width={canvasWidth}>

    :对不起，当前浏览器暂不支持此功能！

}

我们知道，每个 Canvas 节点都有一个对应的 context 对象, 我们可以通过 Canvas 对象的 getContext() 方法，直接把量字符串 “2d” 作为唯一的参数传递给它来获取。接下来，我们通过 ref 获取 Canvas 元素，再通过 getContext() 方法得到一个画布上绘图的环境。

1

2

let cxt = this.canvas.getContext('2d');

this.setState({cxt: cxt});

环境已经准备妥当，接下来我们就开始进行绘制工作吧！

绘制

首先绘制开始路径：

1

cxt.beginPath();

然后设置当前线条的宽度：

1

cxt.lineWidth = 5;

设置线条的颜色：

1

cxt.strokeStyle = '#000';

通过 moveTo 和 lineTo ，我们来绘制一条线

1

2

3

4

cxt.moveTo(0,0);

cxt.lineTo(150,0);

// 绘制已定义的路径

cxt.stroke()

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

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

1

cxt.lineCap = 'round';

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

1

cxt.lineJoin = 'round';

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

1

2

cxt.shadowBlur = 1;

cxt.shadowColor = '#000';

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

监听画布事件

阅读剩余部分

相关阅读 >>

html5中canvas的使用--画线和面

介绍html5+canvas调用手机拍照功能实现图片上传（下篇）

html5和js绘制图片到canvas的方法

使用html5 canvas api中的clip()方法裁剪区域图像

canvas中普通动效与粒子动效的实现 方法介绍（代码示例）

如何使用canvas画一个微笑的表情（代码示例）

详细介绍html5 canvas基本绘图之绘制线段代码实例

h5在canvas中实现自定义路径动画

html5 canvas image的图文代码详解(一)

html5 canvas实现简单的双缓冲

更多相关阅读请进入《canvas》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...