建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
使用vue實現(xiàn)一個電子簽名組件的示例代碼-創(chuàng)新互聯(lián)
在生活中我們使用到電子簽名最多的地方可能就是銀行了，每次都會讓你留下大名。今天我們就要用vue實現(xiàn)一個電子簽名的面板
想要繪制圖形，第一步想到的就是使用canvas標簽，在之前的文章里我們使用canvas實現(xiàn)了一個前端生成圖形驗證碼的組件，被吐槽不夠安全，那么這個電子簽名組件想必不會被吐槽了吧~
canvas
canvas標簽本身是沒有繪圖能力的，所有的繪制工作必須在 JavaScript 內(nèi)部完成。
使用canvas繪圖有幾個必要的步驟：
- 獲取canvas元素
- 通過canvas元素創(chuàng)建context對象
- 通過context對象來繪制圖形
在當前電子簽名需求中，由于簽名其實是由一條條線組成的，因此我們會用到以下幾個方法：
- beginPath() ：開始一條路徑或重置當前的路徑
- moveTo()：把路徑移動到畫布中的指定點，不創(chuàng)建線條
- lineTo()：添加一個新點，然后在畫布中創(chuàng)建從該點到最后指定點的線條
- stroke()：繪制已定義的路徑
- closePath()：創(chuàng)建從當前點回到起始點的路徑
事件
想要在canvas中繪圖，還需要綁定幾個特定的事件，而這些事件在pc端和手機端不盡相同
pc端事件
- mousedown
- mousemove
- mouseup
手機端事件
- touchstart
- touchmove
- touchend
核心代碼
初始化canvas標簽并綁定事件
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
新聞標題：使用vue實現(xiàn)一個電子簽名組件的示例代碼-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://fisionsoft.com.cn/article/cceges.html
