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