原文链接,web 和 h5 通用方法
<!DOCTYPE html>
<html>
<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>电子签名</title>
<style>
.canvas-box {
border: 1px solid #333;
}
</style>
</head>
<body>
<canvas class="canvas-box"></canvas>
<div>
<button onclick="cancel()">取消</button>
<button onclick="save()">保存</button>
</div>
<script>
const config = {
width: 300,
height: 150,
lineWidth: 5, // 线宽
strokeStyle: 'red', // 线条颜色
lineCap: 'round', // 线条两端圆角
lineJoin: 'round' // 线条交汇处圆角
}
const canvas = document.querySelector('canvas')
canvas.width = config.width
canvas.height = config.height
const ctx = canvas.getContext('2d')
ctx.fillStyle = 'transparent'
ctx.fillRect(0, 0, config.width, config.height)
// 保存上次绘制的坐标和偏移量
let client = {
offsetX: 0,
offsetY: 0,
endX: 0,
endY: 0
}
// 设备兼容,正则判断是否为移动端
const mobileStatus = (/Mobile|Android|iPhone/i.test(navigator.userAgent))
// 监听鼠标按下/触摸开始
window.addEventListener(mobileStatus ? 'touchstart' : 'mousedown', init)
// 监听鼠标弹起/触摸离开
window.addEventListener(mobileStatus ? 'touchend' : 'mouseup', closeDraw)
// 获取鼠标按下时的坐标和偏移量,并绘制起点
function init (event) {
const { offsetX, offsetY, pageX, pageY } = mobileStatus ? event.changedTouches[0] : event
client.offsetX = offsetX
client.offsetY = offsetY
client.endX = pageX
client.endY = pageY
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)
}
// 绘制
function draw () {
const { pageX, pageY } = mobileStatus ? event.changedTouches[0] :event
client.endX = pageX
client.endY = pageY
ctx.lineTo(pageX, pageY) // 根据坐标点位移动添加线条
ctx.stroke() // 绘制
}
// 绘制结束
function closeDraw () {
ctx.closePath()
window.removeEventListener('mousemove', draw)
}
// 取消,清空画布
function cancel () {
ctx.clearRect(0, 0, config.width, config.height)
}
// 保存,把画布内容保存为图片并下载
function save () {
// 把画布内容转成 blob 流
canvas.toBlob(blob => {
const date = Date.now().toString()
const a = document.createElement('a')
a.download = `${date}.png`
a.href = URL.createObjectURL(blob)
a.click()
a.remove()
})
}
</script>
</body>
</html>