前端实现电子签名（web、移动端）通用组件（canvas实现）
生活随笔
收集整理的這篇文章主要介紹了
前端实现电子签名（web、移动端）通用组件（canvas实现）
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!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>
// 配置內(nèi)容
const config = {
width: 400, // 寬度
height: 200, // 高度
lineWidth: 5, // 線寬
strokeStyle: 'red', // 線條顏色
lineCap: 'round', // 設(shè)置線條兩端圓角
lineJoin: 'round', // 線條交匯處圓角
} // 獲取canvas 實(shí)例
const canvas = document.querySelector('canvas')
// 設(shè)置寬高
canvas.width = config.width
canvas.height = config.height
// 設(shè)置一個(gè)邊框
canvas.style.border = '1px solid #000'
// 創(chuàng)建上下文
const ctx = canvas.getContext('2d') // 設(shè)置填充背景色
ctx.fillStyle = 'transparent'
// 繪制填充矩形
ctx.fillRect(
0, // x 軸起始繪制位置
0, // y 軸起始繪制位置
config.width, // 寬度
config.height // 高度
); // 保存上次繪制的 坐標(biāo)及偏移量
const client = {
offsetX: 0, // 偏移量
offsetY: 0,
endX: 0, // 坐標(biāo)
endY: 0
} // 判斷是否為移動(dòng)端
const mobileStatus = (/Mobile|Android|iPhone/i.test(navigator.userAgent)) // 初始化
const init = event => {
// 獲取偏移量及坐標(biāo)
const { offsetX, offsetY, pageX, pageY } = mobileStatus ? event.changedTouches[0] : event // 修改上次的偏移量及坐標(biāo)
client.offsetX = offsetX
client.offsetY = offsetY
client.endX = pageX
client.endY = pageY // 清除以上一次 beginPath 之后的所有路徑，進(jìn)行繪制
ctx.beginPath()
// 根據(jù)配置文件設(shè)置相應(yīng)配置
ctx.lineWidth = config.lineWidth
ctx.strokeStyle = config.strokeStyle
ctx.lineCap = config.lineCap
ctx.lineJoin = config.lineJoin
// 設(shè)置畫(huà)線起始點(diǎn)位
ctx.moveTo(client.endX, client.endY)
// 監(jiān)聽(tīng) 鼠標(biāo)移動(dòng)或手勢(shì)移動(dòng)
window.addEventListener(mobileStatus ? "touchmove" : "mousemove", draw)
}
// 繪制
const draw = event => {
// 獲取當(dāng)前坐標(biāo)點(diǎn)位
const { pageX, pageY } = mobileStatus ? event.changedTouches[0] : event
// 修改最后一次繪制的坐標(biāo)點(diǎn)
client.endX = pageX
client.endY = pageY // 根據(jù)坐標(biāo)點(diǎn)位移動(dòng)添加線條
ctx.lineTo(pageX , pageY ) // 繪制
ctx.stroke()
}
// 結(jié)束繪制
const cloaseDraw = () => {
// 結(jié)束繪制
ctx.closePath()
// 移除鼠標(biāo)移動(dòng)或手勢(shì)移動(dòng)監(jiān)聽(tīng)器
window.removeEventListener("mousemove", draw)
}
// 創(chuàng)建鼠標(biāo)/手勢(shì)按下監(jiān)聽(tīng)器
window.addEventListener(mobileStatus ? "touchstart" : "mousedown", init)
// 創(chuàng)建鼠標(biāo)/手勢(shì) 彈起/離開(kāi) 監(jiān)聽(tīng)器
window.addEventListener(mobileStatus ? "touchend" :"mouseup", cloaseDraw) // 取消-清空畫(huà)布
const cancel = () => {
// 清空當(dāng)前畫(huà)布上的所有繪制內(nèi)容
ctx.clearRect(0, 0, config.width, config.height)
}
// 保存-將畫(huà)布內(nèi)容保存為圖片
const save = () => {
// 將canvas上的內(nèi)容轉(zhuǎn)成blob流
canvas.toBlob(blob => {
// 獲取當(dāng)前時(shí)間并轉(zhuǎn)成字符串，用來(lái)當(dāng)做文件名
const date = Date.now().toString()
// 創(chuàng)建一個(gè) a 標(biāo)簽
const a = document.createElement('a')
// 設(shè)置 a 標(biāo)簽的下載文件名
a.download = `${date}.png`
// 設(shè)置 a 標(biāo)簽的跳轉(zhuǎn)路徑為 文件流地址
a.href = URL.createObjectURL(blob)
// 手動(dòng)觸發(fā) a 標(biāo)簽的點(diǎn)擊事件
a.click()
// 移除 a 標(biāo)簽
a.remove()
})
}
</script>
</html>
總結(jié)
以上是生活随笔為你收集整理的前端实现电子签名（web、移动端）通用组件（canvas实现）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 《Think in JAVA》之每日一读
- 下一篇： vsm shadowmap format