當前位置：
首頁 >
前端实现电子签名（web、移动端）通用组件（canvas实现）
發布時間：2023/10/11
80
老码农
生活随笔
收集整理的這篇文章主要介紹了
前端实现电子签名（web、移动端）通用组件（canvas实现）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!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.width
canvas.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 = offsetX
client.offsetY = offsetY
client.endX = pageX
client.endY = pageY // 清除以上一次 beginPath 之后的所有路徑，進行繪制
ctx.beginPath()
// 根據配置文件設置相應配置
ctx.lineWidth = config.lineWidth
ctx.strokeStyle = config.strokeStyle
ctx.lineCap = config.lineCap
ctx.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 = pageX
client.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 => {
// 獲取當前時間并轉成字符串，用來當做文件名
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>
總結
以上是生活随笔為你收集整理的前端实现电子签名（web、移动端）通用组件（canvas实现）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《Think in JAVA》之每日一读
- 下一篇： vsm shadowmap format