> 文章列表 > 【JavaScript】前端实现电子签名：

【JavaScript】前端实现电子签名：

文章列表

【JavaScript】前端实现电子签名：

文章目录

- - - 一、效果:
    - 二、实现:
    - 三、扩展

一、效果:

【JavaScript】前端实现电子签名：

二、实现:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}</style>
</head>
<body><canvas></canvas><div><button onclick="cancel()">取消</button><button onclick="save()">保存</button></div>
</body>
<script>// 配置内容const config = {width: 400, // 宽度height: 200, // 高度lineWidth: 5, // 线宽strokeStyle: 'red', // 线条颜色lineCap: 'round', // 设置线条两端圆角lineJoin: 'round', // 线条交汇处圆角}// 获取canvas 实例const canvas = document.querySelector('canvas')// 设置宽高canvas.width = config.widthcanvas.height = config.height// 设置一个边框canvas.style.border = '1px solid #000'// 创建上下文const ctx = canvas.getContext('2d')// 设置填充背景色ctx.fillStyle = 'transparent'// 绘制填充矩形ctx.fillRect(0, // x 轴起始绘制位置0, // y 轴起始绘制位置config.width, // 宽度config.height // 高度);// 保存上次绘制的 坐标及偏移量const client = {offsetX: 0, // 偏移量offsetY: 0,endX: 0, // 坐标endY: 0}// 判断是否为移动端const mobileStatus = (/Mobile|Android|iPhone/i.test(navigator.userAgent))// 初始化const init = event => {// 获取偏移量及坐标const { offsetX, offsetY, pageX, pageY } = mobileStatus ? event.changedTouches[0] : event // 修改上次的偏移量及坐标client.offsetX = offsetXclient.offsetY = offsetYclient.endX = pageXclient.endY = pageY// 清除以上一次 beginPath 之后的所有路径，进行绘制ctx.beginPath()// 根据配置文件设置相应配置ctx.lineWidth = config.lineWidthctx.strokeStyle = config.strokeStylectx.lineCap = config.lineCapctx.lineJoin = config.lineJoin// 设置画线起始点位ctx.moveTo(client.endX, client.endY)// 监听 鼠标移动或手势移动window.addEventListener(mobileStatus ? "touchmove" : "mousemove", draw)}// 绘制const draw = event => {// 获取当前坐标点位const { pageX, pageY } = mobileStatus ? event.changedTouches[0] : event// 修改最后一次绘制的坐标点client.endX = pageXclient.endY = pageY// 根据坐标点位移动添加线条ctx.lineTo(pageX , pageY )// 绘制ctx.stroke()}// 结束绘制const cloaseDraw = () => {// 结束绘制ctx.closePath()// 移除鼠标移动或手势移动监听器window.removeEventListener("mousemove", draw)}// 创建鼠标/手势按下监听器window.addEventListener(mobileStatus ? "touchstart" : "mousedown", init)// 创建鼠标/手势 弹起/离开 监听器window.addEventListener(mobileStatus ? "touchend" :"mouseup", cloaseDraw)// 取消-清空画布const cancel = () => {// 清空当前画布上的所有绘制内容ctx.clearRect(0, 0, config.width, config.height)}// 保存-将画布内容保存为图片const save = () => {// 将canvas上的内容转成blob流canvas.toBlob(blob => {console.log(blob,URL.createObjectURL(blob))// 获取当前时间并转成字符串，用来当做文件名const date = Date.now().toString()// 创建一个 a 标签const a = document.createElement('a')// 设置 a 标签的下载文件名a.download = `${date}.png`// 设置 a 标签的跳转路径为 文件流地址a.href = URL.createObjectURL(blob)// 手动触发 a 标签的点击事件a.click()// 移除 a 标签a.remove()})}
</script>
</html>

三、扩展

【各内核和浏览器支持情况】
Mozilla 程序从 Gecko 1.8 (Firefox 1.5 (en-US)) 开始支持canvas。它首先是由 Apple 引入的，用于 OS X Dashboard 和 Safari。Internet Explorer 从 IE9 开始支持canvas ，更旧版本的 IE 中，页面可以通过引入 Google 的 Explorer Canvas项目中的脚本来获得canvas支持。Google Chrome 和 Opera 9+ 也支持 canvas。

【小程序中提示】
在小程序中我们如果需呀实现的话，也是同样的原理哦，只是我们需要将创建实例和上下文的Api进行修改，因为小程序中是没有dom，既然没有dom，哪来的操作dom这个操作呢。

如果是uni-app则需要使用uni.createCanvasContext进行上下文创建
【uni.createCanvasContext】 https://uniapp.dcloud.net.cn/api/canvas/createCanvasContext.html

如果是原生微信小程序则使用wx.createCanvasContext进行创建（2.9.0）之后的库不支持
【wx.createCanvasContext】 https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createCanvasContext.html

【canvas】 https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API