2022.6.12 canvas实现手写签名操作

最新推荐文章于 2024-06-25 09:42:52 发布

前端码农小黄

最新推荐文章于 2024-06-25 09:42:52 发布

阅读量261

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_43160044/article/details/125251967

版权

这篇博客介绍了如何使用HTML5的Canvas元素和鼠标事件来创建一个简单的绘图应用。用户可以通过鼠标在画布上绘制线条，实现黑板式的写字功能。此外，还提供了截图和清除画布的功能，移动端可通过触控事件实现类似功能。

摘要由CSDN通过智能技术生成

主要用到canvas还有mouse相关事件，了解之后其实还是挺简单的

class Draw {
	constructor (
		width,
		height,
		el,
		app,
		btns
	) {
		if (!el || el.tagName.toLowerCase() !== 'canvas') {
			throw new Error('please provide a canvas node')
		}
		this.el = el
		this.el.width = width || 500
		this.el.height = height || 500
		this.app = this.el.getContext('2d')
		this.btns = btns || this.el.insertAdjacentElement('afterend', document.createElement('div'))
		this.setBackground()
		this.event()
	}
	// 初始背景为黑色，生成背景
	setBackground () {
		this.app.fillStyle = '#000'
		this.app.fillRect(0, 0, this.el.width, this.el.height)
	}
	// 事件绑定（制作画笔）
	event () {
		// bind会返回新函数，addEventListener与removeEventListener要使用相同函数
		const callback = this.drawEventCallback.bind(this)
		
		this.el.addEventListener('mousedown', () => {
			// 重新画线
			this.app.beginPath()
			// 鼠标移动事件
			this.el.addEventListener('mousemove', callback)
		})
		this.el.addEventListener('mouseup', () => {
			// 移除鼠标移动事件
			this.el.removeEventListener('mousemove', callback)
		})
	}
	// 黑板写字的事件回调函数
	drawEventCallback () {
		this.app.lineTo(event.offsetX, event.offsetY)
		this.app.strokeStyle = 'white'
		this.app.stroke()
	}
	// 截图和下载操作
	short () {
		// 生成截图按钮
		const bt = document.createElement('button')
		bt.innerText = '截图'
		this.btns.insertAdjacentElement('beforeend', bt)
		
		const img = new Image()
		this.el.insertAdjacentElement('afterend', img)
		
		bt.addEventListener('click', () => {
			img.src = this.el.toDataURL('image/png')
			img.style.cssText = 'width:300px;position:absolute;bottom:50px;right:0;border:solid 10px white;left:50%;transform:translateX(-50%);'
			let a = document.createElement('a')
			a.href = img.src
			a.download = 'screenShot.png'
			a.click()
		})
		return this
	}
	clear () {
		const bt = document.createElement('button')
		bt.innerText = '清屏'
		this.btns.insertAdjacentElement('beforeend', bt)
		
		bt.addEventListener('click', () => {
			this.app.fillStyle = '#000'
			this.app.fillRect(0, 0, this.el.width, this.el.height)
		})
	}
}
const blackboard = new Draw(800, 300, document.getElementById('canvas'))
blackboard.short()
blackboard.clear()

在移动端实现的话将鼠标相关事件改成触摸就行~

参考文档：黑板实例