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端/移動端都能用、掃碼簽名、實(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è)移動端鏈接二維碼
6.在移動端簽名時(shí)，通過WebSocket，實(shí)時(shí)傳遞數(shù)據(jù)給PC端。
涉及知識點(diǎn)
Canvas涉及特性：
- 基本屬性
getContext()
strokeStyle
fillStyle
lineCap
lineJoin
- 路徑繪制
beginPath()
lineTo()
moveTo()
- 其他方法（生成base64，清除畫板）
toDataURL()
clearRect()
涉及鼠標(biāo)事件：
mousemove
mousedown
mouseup
mouseout
涉及移動端觸摸事件：
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)
- 移動端觸摸事件，禁止移動端屏幕，修改筆畫粗細(xì)、筆畫顏色
- 實(shí)時(shí)同步WebSocket
- 實(shí)時(shí)同步筆畫時(shí)，如何讓筆畫有實(shí)時(shí)同步一筆一畫的效果？下圖
以上就是JS前端使用canvas編寫一個(gè)簽名板的詳細(xì)內(nèi)容，更多關(guān)于JS canvas簽名板的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
詳解如何使用mock.js實(shí)現(xiàn)接口測試的自動化
這篇文章主要為大家介紹了如何使用mock.js實(shí)現(xiàn)接口測試的自動化詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
JavaScript?設(shè)計(jì)模式之洋蔥模型原理及實(shí)踐應(yīng)用
這篇文章主要介紹了JavaScript?設(shè)計(jì)模式之洋蔥模型原理及實(shí)踐應(yīng)用，主要針對項(xiàng)目中遇到的問題，引申到koa-compose原理解析。通過學(xué)習(xí)洋蔥模式來解決我們實(shí)際項(xiàng)目中的問題2022-09-09
這篇文章主要為大家介紹了tree?shaking對打包體積優(yōu)化及作用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了JavaScript文檔對象模型DOM，當(dāng)網(wǎng)頁被加載時(shí)，瀏覽器會創(chuàng)建頁面的文檔對象模型，通過可編程的對象模型，JavaScript 獲得了足夠的能力來創(chuàng)建動態(tài)的 HTML。下面來看看文章得詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
基于遷移學(xué)習(xí)的JS目標(biāo)檢測器構(gòu)建過程詳解
這篇文章主要為大家介紹了基于遷移學(xué)習(xí)的JS目標(biāo)檢測器構(gòu)建過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
微信小程序 簡單實(shí)例（閱讀器）的實(shí)例開發(fā)
這篇文章主要介紹了微信小程序 簡單實(shí)例（閱讀器）的實(shí)例開發(fā)的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要為大家介紹了Electron 剪貼板實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了微信小程序 閉包寫法詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-12-12
這篇文章主要為大家介紹了requestAnimationFrame使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
JS開發(fā)前端團(tuán)隊(duì)展示控制器來為成員引流
這篇文章主要為大家介紹了JS開發(fā)前端團(tuán)隊(duì)展示控制器實(shí)現(xiàn)為成員引流示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08