資訊專欄INFORMATION COLUMN
摘要：更多文章最近開發(fā)網(wǎng)站有一個(gè)需求，要求頁(yè)面上有一塊區(qū)域，用戶能用鼠標(biāo)在上面寫字，并能保存成圖片碼放在服務(wù)器。這樣的需求用實(shí)現(xiàn)是最好的。我對(duì)代碼做了擴(kuò)展，除了支持畫筆，還支持噴槍刷子橡皮擦功能。可以使用參數(shù)其類型，默認(rèn)為格式。返回的是一串編碼的
更多文章
最近開發(fā)網(wǎng)站有一個(gè)需求，要求頁(yè)面上有一塊區(qū)域，用戶能用鼠標(biāo)在上面寫字，并能保存成圖片 base64 碼放在服務(wù)器。
這樣的需求用 canvas 實(shí)現(xiàn)是最好的。
需要用到 canvas 的以下幾個(gè)屬性：
beginPath 創(chuàng)建一個(gè)新的路徑
globalAlpha 設(shè)置圖形和圖片透明度的屬性
lineWidth 設(shè)置線段厚度的屬性（即線段的寬度）
strokeStyle 描述畫筆（繪制圖形）顏色或者樣式的屬性，默認(rèn)值是 #000 (black)
moveTo(x, y) 將一個(gè)新的子路徑的起始點(diǎn)移動(dòng)到(x，y)坐標(biāo)的方法
lineTo(x, y) 使用直線連接子路徑的終點(diǎn)到x，y坐標(biāo)的方法（并不會(huì)真正地繪制）
closePath 它嘗試從當(dāng)前點(diǎn)到起始點(diǎn)繪制一條直線
stroke 它會(huì)實(shí)際地繪制出通過 moveTo() 和 lineTo() 方法定義的路徑，默認(rèn)顏色是黑色
除了用到這些屬性外，還需要監(jiān)聽鼠標(biāo)點(diǎn)擊和鼠標(biāo)移動(dòng)事件。
廢話就不多說了，直接上代碼和 DEMO。
我對(duì)代碼做了擴(kuò)展，除了支持畫筆，還支持噴槍、刷子、橡皮擦功能。
canvas 轉(zhuǎn)成圖片將 canvas 轉(zhuǎn)成圖片，需要用到以下屬性：
toDataURL
canvas.toDataURL() 方法返回一個(gè)包含圖片展示的 data URI 。可以使用 type 參數(shù)其類型，默認(rèn)為 PNG 格式。圖片的分辨率為96dpi。
const image = new Image()
// canvas.toDataURL 返回的是一串Base64編碼的URL
image.src = canvas.toDataURL("image/png")
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103777.html
摘要：原文匠心打造簽名組件導(dǎo)讀月又是項(xiàng)目吃緊的時(shí)候，一大波需求襲來(lái)，猝不及防?？梢韵却吝@里體驗(yàn)把后面將要提到的簽名組件。剩下的也是綁定事件中關(guān)鍵的一步。設(shè)置完成了上述功能，一個(gè)簽名插件就已經(jīng)成型了。 本文首發(fā)于CSDN網(wǎng)站，下面的版本又經(jīng)過進(jìn)一步的修訂。原文：匠心打造canvas簽名組件 導(dǎo)讀 6月又是項(xiàng)目吃緊的時(shí)候，一大波需求襲來(lái)，猝不及防。 度過了漫長(zhǎng)而煎熬的6月，是時(shí)候總結(jié)一波。最近移...
本文主要為大家講述在小程序中實(shí)現(xiàn)手寫板簽名的具體代碼，下面看看具體內(nèi)容： 1.wxss代碼 page{ background:#F8F8F8; } /*簽名*/ .qianming{ background:#fff; padding:20rpx30rpx; font-size:32rpx; color:#333; padding-bottom:0; ...
摘要：前言公司最近有一個(gè)頁(yè)面的功能，比較簡(jiǎn)單的一個(gè)調(diào)查表功能，嵌套在我們微信公眾號(hào)里面。同時(shí)用到了微信的登錄和分享接口。參考鏈接使用微信接口前端部分我們用微信接口主要是做的登錄和分享功能，首先是上微信公眾平臺(tái)上邊看看，把權(quán)限搞好之后后端配置。 showImg(https://segmentfault.com/img/bVbrOkH); 前言： 公司最近有一個(gè)H5頁(yè)面的功能，比較簡(jiǎn)單的一個(gè)調(diào)查...
閱讀 3597·2023-04-26 01:43
閱讀 2984·2021-10-14 09:42
閱讀 5477·2021-09-30 09:59
閱讀 2183·2021-09-04 16:40
閱讀 1220·2019-08-30 15:52
閱讀 838·2019-08-29 17:09
閱讀 2006·2019-08-26 13:37
閱讀 3440·2019-08-26 10:20
