怎样用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 :
isCanvasSupported = (): boolean => {
let elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}然后按照推断结果选中创立 Canvas 画布还是展现提醒
{isCanvasSupported ?
<canvas ref={canvas => (this.canvas = canvas)} height={canvasHeight} width={canvasWidth}>
:对不起，当前阅读器暂不支撑此功效！
}我们知道，每个 Canvas 节点都有一个对应的 context 对象, 我们可以通过 Canvas 对象的 getContext() 办法，直接把量字符串 “2d” 作为独一的参数传递给它来猎取。接下来，我们通过 ref 猎取 Canvas 元素，再通过 getContext() 办法得到一个画布上画图的环境。
let cxt = this.canvas.getContext('2d');
this.setState({cxt: cxt});环境已经预备安妥，接下来我们就开端停止绘制工作吧！
绘制
第一绘制开端途径：
cxt.beginPath();
然后设定当前线条的宽度：
cxt.lineWidth = 5;
设定线条的色彩：
cxt.strokeStyle = '#000';
通过 moveTo 和 lineTo ，我们来绘制一条线
cxt.moveTo(0,0); cxt.lineTo(150,0); // 绘制已定义的途径 cxt.stroke()
但是，我们发明绘制的线条比力生硬
这时，我们可以通过 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 的知道， Canvas 画布为我们供给了一个用来作图的平面空间，该空间的每个点都有本人的坐标，x 表示横坐标，y 表示竖坐标。原点 (0, 0) 位于图像左上角，x 轴的正向是原点向右，y 轴的正向是原点向下。
于是我们通过 getBoundingClientRect() 办法获得页面 Canvas 元素相对阅读器视窗的位置左边和顶部的像素间隔，再利用 clientX，clientY 事件属性返回当事件被触发时鼠标指针向关于阅读器页面的水安然平静垂直坐标，最后通过 lineTo 和 stroke 来绘制途径。
同时，我们要记得在 events[2] 事件施行之后，移除 events[1]、events[2] 事件，不然会造成不断绘制。
endEventHandler(event: any): void {
event.preventDefault();
const {events, moveEventHandler, endEventHandler} = this.state;
this.canvas.removeEventListener(events[1], moveEventHandler, false);
this.canvas.removeEventListener(events[2], endEventHandler, false);
}如此重复轮回上述事件操纵，我们的签字功效就根本实现了。
从新绘制
签字历程中，签错或是签的过于潦草是必不成免的，所以我们需要支撑清空签字的功效，这时，我们利用 Canvas 的 clearRect() 办法就可以帮忙我们清除画布区域内容。
cxt.clearRect(0, 0, canvasWidth, canvasHeight);
图片处置
绘制之后我们还没完事，我们还需要把绘制的签名上传留存。这时，我们可以利用 toDataURL() 办法将 Canvas 转化成一样的图像文件情势。
平常我们直接施行以操纵就能转化成 data URI，然后再利用 ajax 恳求上传就完事了。
dataurl = this.canvas.toDataURL('image/png');
//or
dataurl = this.canvas.toDataURL('image/jpeg', 0.8);但是，由于各种业务需求，我们有时需要携带页面其他内容，这时，我们可以借助 html2canvas 来实现。html2canvas 可以帮忙我们对阅读器端整个或部分页面停止截屏，并渲染成一个 Canvas ，然后我们在利用 toDataURL() 办法停止处置。
说道 html2canvas，顺便给大家一个绕坑提醒，它在一些低版本阅读器截出来的图片是空白的，缘由是使用了flex 规划，而html2canvas并不支撑 -webkit-flex 或 -webkit-box，所以没法将 HTML 生成 Canvas，从而致使了截出一张白屏。
解决方法：
不使用flex规划
修改 html2canvas 源码，在html2canvas\dist\npm\parsing\display.js 文件中增添 -webkit-flex 和 -webkit-box 也返回 DISPLAY.FLEX; 小结
通过以上几步，我们就根本实现了在线签名的功效。值得留意的是，这个项目我们使用的 React+TypeScript 环境构建，上述代码的实际使用需要结合本人环境停止恰当修改。
文中使用的是 Canvas 比力浅层的绘制知识，假如想利用Canvas进动画制作、物理结果模拟、碰撞检测、游戏开发、移动利用开发、大数据可视化开发，还需要我们复习一下此前学过的数学几何、物理方面的知识，然后在渐渐探索。此刻许多成熟的图表插件都是用 Canvas 实现的，例如 Chart.js、ECharts等，里面许多好看炫酷的图表，几乎覆盖了所有图表的实现。Canvas还有许多开源类库，例如 ZRender、createJS、Pixi.js等，ECharts底层也是依靠轻量级的 Canvas 类库 ZRender 停止封装的。
以上就是怎样用canvas实此刻线签名的示例代码的具体内容，更多请关注百分百源码网其它相关文章！
