亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JS前端使用canvas編寫一個(gè)簽名板

 更新時(shí)間：2022年08月02日 09:36:00   作者：一起重學(xué)前端  
這篇文章主要為大家介紹了JS前端使用canvas編寫一個(gè)簽名板實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

需求

需求是做不完了，福利也被砍了，旅游也泡湯了，手上有2個(gè)需求，還沒做完，PM就來新需求了。

開發(fā)一個(gè)簽名板：要求PC端/移動(dòng)端都能用、掃碼簽名、實(shí)時(shí)同步、可以改變筆畫粗細(xì)、筆畫顏色、可以生成base64圖片。

方案分析canvas

1.獲取頁面[canvas]元素，設(shè)置寬高（800*200）

2.通過**HTMLCanvasElement.getContext()**  方法返回[canvas] 的上下文ctx

3.初始化ctx基礎(chǔ)屬性

  • 線條顏色
  • 線條寬度
  • 線條末端形狀

4.開始繪畫

  • 監(jiān)聽鼠標(biāo)事件
  • 繪制起點(diǎn)、終點(diǎn)

5.生成一個(gè)移動(dòng)端鏈接二維碼

6.在移動(dòng)端簽名時(shí)，通過WebSocket，實(shí)時(shí)傳遞數(shù)據(jù)給PC端。

涉及知識(shí)點(diǎn)

Canvas涉及特性：

  • 基本屬性

getContext()

strokeStyle

fillStyle

lineCap

lineJoin

  • 路徑繪制

beginPath()

lineTo()

moveTo()

  • 其他方法（生成base64，清除畫板）

toDataURL()

clearRect()

涉及鼠標(biāo)事件：

mousemove

mousedown

mouseup

mouseout

涉及移動(dòng)端觸摸事件：

touchstart

touchend

touchmove

代碼

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>canvas-sign</title>
	<style>
		html,
		body {
			margin: 0;
		}
		.container {
			width: calc(100vw - 40px);
			height: calc(100vh - 40px);
			padding: 20px;
		}
		.canvas-body {
			width: calc(80vw);
			height: calc(80vh);
			margin: 20px auto;
		}
		#sign {
			background-color: #f3f5f7;
			border-radius: 4px;
			border: 1px dashed #0F6BFF;
		}
		#img {
			margin: 20px;
			border-radius: 4px;
			background-color: #f3f5f7;
			display: none;
		}
		#img.show {
			display: inline-block;
		}
		.btns {
			width: calc(80vw - 40px);
			text-align: right;
			margin: 0 auto;
		}
		@media screen and (orientation: portrait) {
			.qrcode {
				display: none;
			}
		}
	</style>
	<script type="text/javascript" src="https://static.runoob.com/assets/qrcode/qrcode.min.js"></script>
</head>
<body>
	<div class="container">
		<div id="canvas-body" class="canvas-body">
			<canvas id="sign" style="width: 100%; height: 100%;"></canvas>
			<div class="qrcode">
				掃碼簽名
				<div id="qrcode"></div>
			</div>
		</div>
		<div class="btns">
			<button id="reset">重置</button>
			<button id="showImg">生成圖片</button>
		</div>
	</div>
	<div id="img">
	</div>
	<script>
		let canvasBody = document.getElementById('canvas-body');
		let canvas = document.getElementById('sign');
		let reset = document.getElementById('reset');
		let showImg = document.getElementById('showImg');
		let img = document.getElementById('img');
		canvas.width = canvasBody.clientWidth;
		canvas.height = canvasBody.clientHeight;
		let ctx = canvas.getContext('2d');
		ctx.lineWidth = 10;
		ctx.strokeStyle = '#333';
		ctx.lineCap = 'round';
		ctx.lineJoin = 'round';
		let isDrawing = false;
		let dataURL = '';
		let initX;
		let initY;
		// 事件監(jiān)聽
		canvas.addEventListener('mousedown', (e) => {
			isDrawing = true;
			initX = e.offsetX;
			initY = e.offsetY
		});
		canvas.addEventListener('mousemove', draw);
		canvas.addEventListener('mouseup', () => isDrawing = false);
		canvas.addEventListener('mouseout', () => isDrawing = false);
		// 繪制
		function draw(e) {
			if (!isDrawing) return
			ctx.beginPath();
			// 起點(diǎn)
			ctx.moveTo(initX, initY);
			// 終點(diǎn)
			ctx.lineTo(e.offsetX, e.offsetY);
			ctx.stroke();
			initX = e.offsetX;
			initY = e.offsetY
		}
		function clear() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			if (dataURL) {
				dataURL = '';
				img.innerHTML = '';
				img.classList.remove('show');
			}
		}
		function canvasToBase64() {
			dataURL = canvas.toDataURL();
			// let oGrayImg = new Image();
			// oGrayImg.src = dataURL;
			// img.classList.add('show');
			// img.appendChild(oGrayImg)
			alert(`${dataURL}`)
		}
		reset.addEventListener('click', clear);
		showImg.addEventListener('click', canvasToBase64);
	</script>
	<script>
		let qrcode = new QRCode(document.getElementById('qrcode'), {
			width: 96,
			height: 96
		})
		qrcode.makeCode('https://canvas-sign.vercel.app/');
	</script>
</body>
</html>

以上代碼，未開發(fā)的點(diǎn)

  • 移動(dòng)端觸摸事件，禁止移動(dòng)端屏幕，修改筆畫粗細(xì)、筆畫顏色
  • 實(shí)時(shí)同步WebSocket
  • 實(shí)時(shí)同步筆畫時(shí)，如何讓筆畫有實(shí)時(shí)同步一筆一畫的效果？下圖

以上就是JS前端使用canvas編寫一個(gè)簽名板的詳細(xì)內(nèi)容，更多關(guān)于JS canvas簽名板的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論