canvas電子簽名和播放劃線

阿新 • • 發佈：2021-11-17

直接上程式碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>點子簽名</title>
		<style type="text/css">
			#canvas {
				border: 1px solid red;
			}

			.content {
				display: flex;
			}

			.right {
				margin-left: 20px;
			}

			.right-item {
				margin-bottom: 10px;
				display: flex;
				align-items: center;
			}

			.right-item span {
				display: inline-block;
				width: 100px;
				font-size: 17px;
			}

			.slot {
				width: 200px;
				height: 20px;
				background-color: #eee;
				border-radius: 30px;
				overflow: hidden;
				position: relative;
			}

			.slot .slot-round {
				position: absolute;
				border-radius: 30px;
				transition: all .3s;
				background-color: deeppink;
				left: 0;
				top: 0;
				bottom: 0;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<canvas id="canvas" width="1000" height="500"></canvas>
			<div class="right">
				<div class="right-item">
					<span>顏色選擇：</span>
					<input type="color" onchange="colorge(this)" value="#5D1F7A" />
				</div>
				<div class="right-item">
					<span>操作：</span>
					<button type="button" id="submit" style="display: none;">確 認</button>
					<button type="button" onclick="clert(this)">清 除</button>
					<button type="button" onclick="reproduce(this)">重 現</button>
				</div>
				<div class="right-item">
					<span>重現進度：</span>
					<div class="slot">
						<div class="slot-round" id="walk"></div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			let canvas = document.getElementById('canvas')
			let ctx = canvas.getContext('2d')
			let walk = document.getElementById('walk')
			let submit = document.getElementById('submit')
			let solidShow = false //開關
			let walkNumb = 0 //步驟總數
			let startX = 0,
				startY = 0,
				color = '#5D1F7A',
				storage = []
			let GPS = -8 //線開始的位置調整
			let s = 0
			let reproduceS = 0
			let times = null //定時器
			let reproduceTimes = null //重現定時器
			let reproduceShow = false // 是否可重現
			ctx.lineWidth = 5 //線粗
			// 滑鼠按下
			canvas.addEventListener('mousedown', e => {
				if (s == 0) {
					times = setInterval(() => {
						s = s + 1
					}, 1)
				}
				reproduceShow = false
				submit.style = 'display:inline-block;'
				solidShow = true
				startX = e.pageX
				startY = e.pageY
				startSolid(e)
			})
			// 滑鼠離開畫布
			canvas.addEventListener('mouseleave', () => {
				if (solidShow) {
					solidShow = false
				}
			})
			// 滑鼠抬起
			canvas.addEventListener('mouseup', () => {
				solidShow = false
			})
			// 滑鼠滑動
			canvas.addEventListener('mousemove', e => {
				if (solidShow) {
					startSolid(e)
				}
			})

			submit.addEventListener('click', e => {
				e.srcElement.style = 'display:none;'
				timesStop()
			})

			function startSolid(e) { //開始畫線
				let x = e.pageX,
					y = e.pageY
				storage.push({ //記錄畫線
					startX,
					startY,
					x,
					y,
					s
				})
				walkNumb = storage.length
				walk.style = `width:0;background-color:${color};`
				ctx.save()

				ctx.strokeStyle = color
				ctx.beginPath()
				ctx.moveTo(startX + GPS, startY + GPS)
				ctx.lineTo(x + GPS, y + GPS)
				ctx.closePath()
				ctx.stroke()

				ctx.restore()
				if (startY != y) {
					startY = y
				}
				if (startX != x) {
					startX = x
				}
			}

			function clert() { //清除
				reproduceTimesStop()
				timesStop()
				storage = []
				walk.style = `width:0;background-color:${color};`
				ctx.clearRect(0, 0, canvas.width, canvas.height)
			}

			function colorge(e) { //顏色選擇
				color = e.value
			}

			function reproduce() {
				if (!storage.length) {
					alert('沒有可重現的操作！')
					return true
				}
				if (!reproduceShow) {
					submit.style = 'display:none;'
					timesStop()
				}
				console.log('重現的資料', storage)
				ctx.clearRect(0, 0, canvas.width, canvas.height)

				if (reproduceS != 0) {
					reproduceTimesStop()
				}

				if (reproduceS == 0) {
					walkNumb = storage.length
					storage = storage.sort((a, b) => { //排序
						return a.s - b.s
					})
					reproduceTimes = setInterval(() => {
						storage.forEach(item => {
							if (item.s == reproduceS) {
								ctx.strokeStyle = color
								ctx.beginPath()
								ctx.moveTo(item.startX + GPS, item.startY + GPS)
								ctx.lineTo(item.x + GPS, item.y + GPS)
								ctx.closePath()
								ctx.stroke()
								walkNumb = walkNumb - 1
								// walk.innerText = walkNumb
								walk.style = `width:${(storage.length-walkNumb)/storage.length*100}%;background-color:${color};`

							}
						})
						if (storage[storage.length - 1].s == reproduceS) {
							reproduceTimesStop()
						} else {
							reproduceS = reproduceS + 1
						}
					}, 1)
				}
			}

			function reproduceTimesStop() {
				clearInterval(reproduceTimes)
				reproduceS = 0
			}

			function timesStop() {
				console.log('計時停止')
				clearInterval(times)
				s = 0
			}

			function look() { //檢視定時器
				console.log('s', s)
				console.log('reproduceS', reproduceS)
			}
		</script>
	</body>
</html>

有問題聯絡QQ1291481728或在下方評論，會在第一時刻處理。