整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
html5 SVG動畫&路徑
SVG動畫可以使用<animate>元素創建
實例:
創建一個矩形,將在3秒內更改其位置,然后重復動畫兩次
<svg width="1000" height="250">
<rect width="150" height="150" fill="orange">
<animate attributeName="x" from="0" to="300" dur="3s" fill="freeze" repeatCount="2" />
</rect>
</svg>
attributeName:指定哪個屬性需要產生動畫效果
from:指定屬性的起始值
to:指定屬性的結束值
dur:指定動畫運行的時間(持續時間)
fill="frezee|remove":指定動畫播放完畢后是停留在播放的終點還是回到起始位置
repeatCount:指定動畫的重復播放次數
在上面的例子中,矩形在3s內將其x屬性從0更改為300
●要無限重復動畫,請使用值"indefinite"作為repeatCount屬性
<path>元素用于定義一個路徑
下面的命令可用于路徑數據:
●M=moveto
●L=lineto
●H=horizontal lineto
●V=vertical lineto
●C=curveto
●S=smooth curveto
●Q=quadratic Bezier curve
●T=smooth quadratic Bezier curveto
●A=elliptical Arc
●Z=closepath
注意:以上所有命令均允許小寫字母.大寫字母表示絕對定位,小寫字母表示相對定位
實例:
<svg width="500" height="500">
<path d="M50 0 L75 200 L225 200 Z"/>
</svg>
上面的例子中定義了一條路徑,它開始于150 0,到達位置75 200,然后從那里開始到225 200,最后150 0關閉路徑
二 html5 Canvas
html5<canvas>元素用于圖形的繪制,通過腳本(通常是JavaScript)來完成
<canvas>標簽只是圖形容器,你必須使用腳本來繪制圖形
getContext()方法可返回一個對象,該方法提供了用于在畫布上繪畫的方法和屬性.
你可以通過多種方法使用canvas繪制路徑,盒,圓,字符以及添加圖像
<canvas>元素定義如下:
<canvas id"myCanvas" width="200" height="100">
</canvas>
<canvas>標簽通常需要指定一個id屬性(腳本中經常使用),width和height屬性定義的畫布的大小
了解和使用Canvas需要基本了解JavaScript的基本知識
canvas是一個二維坐標
canvas的左上角坐標為(0,0)
x坐標向右增加
y坐標向著畫布底部增加
Canvas-路徑
在Canvas上畫線,我們將使用以下兩種方法:
●moveTo(x,y)定義線條開始坐標
●lineTo(x,y)定義線條結束坐標
在canvas中繪制圓形,我們將使用以下方法:
●arc(x,y,start,stop)
Canvas-文本
使用canvas繪制文本,重要的屬性和方法如下:
●font-定義字體
●fillText(text,x,y)-在canvas上繪制實心的文本
●strokeText(text,x,y)-在canvas上繪制空心的文本
Canvas-漸變
漸變可以填充在矩形,圓形,線條,文本等等,各種形狀可以自己定義不同的顏色
以下有兩種不同的方式來設置canvas漸變:
●creatLinearGradient(x,y,x1,y1)-創建線條漸變
●creatRadialGradient(x,y,r,x1,y1,r1)-創建一個徑向/圓漸變
當我們使用漸變對象,必須使用兩種或兩種以上的停止顏色
addColorStop()方法指定顏色停止,參數使用坐標描述,可以是0至1
使用漸變,設置fillStyle或strokeStyle的值為漸變,然后繪制形狀,如矩形,文本,或一條線
Canva-圖像
把一幅圖像放置在畫布上,使用以下方法:
●drawImage(image,x,y)
三 html5 SVG與Canvas的區別
SVG:
SVG是一種使用XML描述2D圖形的語言
SVG基于XML,這意味著SVG DOM中的每個元素都是可用的.你可以為某個元素附加JavaScript事件處理器
在SVG中,每個被繪制的圖形均被視為對象.如果SVG對象的屬性發生改變,那么瀏覽器能夠自動重現圖形
特點:
●不依賴分辨率
●支持事件處理器
●最適合帶有大型渲染區域的應用程序(比如谷歌地圖)
●復雜程度高會減慢渲染速度(任何過度使用DOM的應用都不快)
●不適合游戲應用
Canvas:
canvas通過JavaScript來繪制2D圖形
canvas可以逐像素進行渲染的
在canvas中,一旦圖形被繪制出來,它就不會繼續得到瀏覽器的關注
如果其位置發生變化,那么整個場景也需要重新啟動,包括任何或許已被圖像覆蓋的對象
特點:
●依賴分辨率
●不支持事件處理器
●弱的文本渲染能力
●能夠以.png或.ipg格式保存結果圖像
●最適合圖像密集型的游戲,其中的許多對象都會被頻換重繪
85條高級AutoCAD工程師繪圖技巧 1.如何替換找不到的原文字體？
2.如何刪除頑固圖層？
5.在 Word文檔中插入 AutoCAD圖形的發法。
7.將AutoCAD中的圖形插入WORD時線寬問題。 11.在多行文字（ mtext）命令中使用 Word97編輯文本。 鍵入REINIT命令，鉤選PGP，再確定 14.從備份文件中恢復圖形
去掉文件和文件夾的隱藏性。 刪除 C:\Documents and Settings\All Users\Application Data\Autodesk\Software Licenses\B2260000.dat 16.acad.pgp文件的修改
點工具——選項——配置——重置；也可用命令MENULOAD，然后點擊瀏覽，選擇ACAD.MNC加載即可。 18.如何關閉CAD中的*BAK文件？
（2）也可以用命令ISAVEBAK,將ISAVEBAK的系統變量修改為0，系統變量為1時，每次保存都會創建“*BAK”備份文件。
按F6鍵切換。或者將COORDS的系統變量修改為1或者2。系統變量為0時，是指用定點設備指定點時更新坐標顯示。系統變量為1時，是指不斷更新坐標顯示。系統變量為2時，是指不斷更新坐標顯示，當需要距離和角度時，顯示到上一點的距離和角度。 20.繪圖時沒有虛線框顯示怎么辦？ 修改系統變量DRAGMODE，推薦修改為AUTO。系統變量為ON時，再選定要拖動的對象后，僅當在命令行中輸入DRAG后才在拖動時顯示對象的輪廓；系統變量為OFF時，在拖動時不顯示對象的輪廓；系統變量位AUTO時，在拖動時總是顯示對象的輪廓。 21.選取對象時拖動鼠標產生的虛框變為實框且選取后留下兩個交叉的點怎么辦？ 將BLIPMODE的系統變量修改為OFF即可。 22.命令中的對話框變為命令提示行怎么辦？ 將CMDDIA的系統變量修改為1。系統變量為0時，為命令行；系統變量為1時，為對話框。 23.如何給AutoCAD工具條添加命令及相應圖標？
用BLIPMODE命令，在提示行下輸入OFF可消除它。 26.怎樣控制命令行回顯是否產生？ 將CMDECHO系統變量改為0或1。 27.快速查出系統變量的方法？ 要記住多達兩三百個變量有一定難度，可以用以下方法查出是哪個變量出了差錯。為敘述方便，將有問題的文件命名為文件1，新建一個文件命名為文件2（昀好新建，因為那樣所有變量都是默認值，也可以用沒問題的文件），分別在兩文件中運行SETVAR，然后選？列出變量，將變量拷到Excel，比較變量中哪些不一樣，這樣可以大大減少查詢變量的時間。舉例：假設一個圖其中變量ANGBASE設為90，那若用程序生成文本的話，所有文本中的字都會旋轉90。現用setvar命令將變量列出，然后將所有變量復制－粘貼到一個Excel文件B列。新建一個文件，再用setvar命令將變量列出，將所有變量復制－粘貼到Excel文件A列，在Excel文件文件C1格輸入“＝IF(A1=B1,0,1)”下拉單元格算出所有行的值，然后對C列按遞減排列，這樣，值不相同的變量就集中在前幾列，再分析這些變量，很快就能查出是ANGBASE變量的設置有問題 28.塊文件不能炸開及不能用另外一些常用命令的問題。
在AutoCAD中同時保存中英文兩套菜單系統，來回切換是可行的。具體作法是把漢化菜單文件改名為Pacad.mnu，放在AutoCAD安裝目錄下的\SUPPORT子目錄中，當然還別忘了將acad.mnl復制成Pacad.mnl，放?*** acad.mnu同一目錄中。在用中文菜單時，用menu命令加載Pacad；換回英文菜單時就再次使用menu命令加載acad菜單文件。 30.如何為autocad2004圖形設置密碼？ 工具—選項—打開和保存按紐—安全選項，設置密碼即可，如果取消密碼在此把密碼刪掉即可。 31.標注時使標注離圖有一定的距離 執行DIMEXO命令，再輸入數字調整距離。 32.如何將圖中所有的STANDADN樣式的標注文字改為SIMPLEX樣式？ 可在ACAD.LSP中加一句：(vl-cmdf ".style" "standadn" "simplex.shx")。 33.重合的線條怎樣突出顯示？ 可以使用工具——顯示順序功能。 34.如何快速變換圖層？ 點取想要變換到的圖層中的任一元素，然后點擊圖層工具欄的-將對象的圖層置為當前-即可。 35.在標注文字時，標注上下標的方法： 使用多行文字編輯命令： 上標：輸入2^，然后選中2^，點a/b鍵即可。 打開多行文字編輯器-在輸入文字的矩形框里點右鍵-選符號-其它打開字符映射表-選擇符號即可。注意字符映射表的內容取決于用戶在“字體”下拉列表中選擇的字體。 37.如何用break命令在一點打斷對象？ 執行break命令，在提示輸入第二點時，可以輸入@再回車，這樣即可在第一點打斷選定對象。 38.使用編輯命令時多選了某個圖元如何去掉？ 在命令未結束下按住shift鍵選擇多選的圖元即可，很方便的喔。 39.“！”鍵的使用。 假設屏幕上有一條已知長度的線（指單線、多義線，未知長度當然也可以），且與水平方向有一定的角度，要求將它縮短一定的長度且方向不變，操作過程如下：直接選取該線，使其夾點出現，將光標移動到要縮短的一端并激活該夾點，使這條線變為可拉伸的皮筋線，將光標按該線的方向移動，使皮筋線和原線段重合，移動的距離沒有限制，有人覺得移動的方向不能和原來一樣那么就用輔助點捕捉命令，輸入“捕捉到昀近點（即near命令）”，然后在 “near 到（即near to）”的提示后輸入“!XX”(XX為具體數值)后回車，該線的長度就改變了。很放便的呦！！！ 40.圖形的打印技巧。
41.質量屬性查詢。 AutoCAD提供點坐標（ID），距離（Distance），面積（area）的查詢，給圖形的分析帶來了很大的方便，但是在實際工作中，有時還須查詢實體質量屬性特性，AutoCAD提供實體質量屬性查詢（Mass Properties），可以方便查詢實體的慣性矩、面積矩、實體的質心等，須注意的是，對于曲線、多義線構造的閉合區域，應先用region命令將閉合區域面域化，再執行質量屬性查詢，才可查詢實體的慣性矩、面積矩、實體的質心等屬性 42.如何計算二維圖形的面積？ 1.對于簡單圖形，如矩形、三角形。只須執行命令AREA（可以是命令行輸入或點擊對應命令圖標），在命令提示“Specify first corner point or [Object/Add/Subtract]:”后，打開捕捉依次選取矩形或三角形各交點后回車，AutoCAD將自動計算面積（Area）、周長（Perimeter），并將結果列于命令行。 2.對于簡單圖形，如圓或其它多段線（Polyline）、樣條線（Spline）組成的二維封閉圖形。執行命令AREA，在命令提示“Specify first corner point or [Object/Add/Subtract]:”后，選擇Object選項，根據提示選擇要計算的圖形，AutoCAD將自動計算面積、周長。 3.對于由簡單直線、圓弧組成的復雜封閉圖形，不能直接執行AREA命令計算圖形面積。必須先使用region命令把要計算面積的圖形創建為面域，然后再執行命令AREA，在命令提示“Specify first corner point or [Object/Add/Subtract]:”后，選擇Object選項，根據提示選擇剛剛建立的面域圖形，AutoCAD將自動計算面積、周長。 43.如何設置線寬？
LineWeight線寬是絕對線寬，而多義線線寬是相對線寬，也就是說，無論圖形以多大尺寸打印LineWeight線寬都不變，而多義線線寬則隨打印尺寸比例大小變化而變化，無論實體被縮放多少倍，LineWeight線寬都不變，而多義線線寬則隨縮放比例改變而改變。 45.[TAB]鍵在AutoCAD捕捉功能中的巧妙利用。 當需要捕捉一個物體上的點時，只要將鼠標靠近某個或某物體，不斷的按TAb鍵，這個或這些物體的某些特殊點（如直線的端點、中間點、垂直點、與物體的交點、圓的四分圓點、中心點、切點、垂直點、交點）就回輪換顯示出來，選擇需要的點左鍵單擊即可以捕中這些點。注意當鼠標靠近兩個物體的交點附近時這兩個物體的特殊點將先后輪換顯示出來（其所屬物體會變為虛線），這對于在圖形局部較為復雜時捕捉點很有用。 46.橢圓命令生成的橢圓是多義線還是實體？ 由系統變量 PELLIPSE決定，當其為1時，生成的橢圓是多義線。 47.一些常用快捷鍵。
---- 在繪制圖樣時，經常遇到畫截交線、相貫線及其他曲線的問題。手工繪制很麻煩，要找特殊點和一定數量一般點，且連出的曲線誤差大。用AutoCAD 2000繪制平面曲線或空間曲線卻很容易。 ---- 方法一：用Pline命令畫2D圖形上通過特殊點的折線，經Pedit命令中Fit或Spline曲線擬合，可變成光滑的平面曲線。用3Dpoly命令畫3D圖形上通過特殊點的折線，經Pedit命令中Spline曲線擬合，可變成光滑的空間曲線。 ---- 方法二：用Solids命令創建三維基本實體（長方體、圓柱、圓錐、球等），再經Boolean（布爾）組合運算：交、并、差和干涉等獲得各種復雜實體，然后利用下拉菜單View（視圖）/3D Viewpoint（三維視點），選擇不同視點來產生標準視圖，得到曲線的不同視圖投影。 50.在AutoCAD中采用什么比例繪圖好？
51.如何在AutoCAD中用自定義圖案來進行填充？ 例如：直線AB與四條平行線相交，現在要剪切掉直線AB右側的部分，執行trim命令，在提示行顯示選擇對象時選擇AB并回車，然后輸入F并回車，然后在AB右側畫一條直線并回車，OK了。 53.怎樣擴大繪圖空間？
word里有對象插入，其中一個就是AutoCAD 圖形，插入前別忘了在AutoCAD里把圖形的背景顏色改為白色（工具-選項-顯示-顏色里面改），否則打出來圖形有填充色，看不見圖形。 55.命令前加“-”與不加“-”的區別 加“-”與不加“-”在AUTOCAD中的意義是不一樣的，加“-”是AUTOCAD2000以后為了使各種語言版本的指令有統一的寫法而制定的相容指令。命令前加“-”是該命令的命令行模式，不加就是對話框模式，具體一點說：前面加“-”后，命令運行時不出現對話框模式，所有的命令都是在命令行中輸入的，不加“-”命令運行時會出現對話框，參數的輸入在對話框中進行。 56.怎樣對兩個圖進行對比檢查？ 可以把其中一個圖做成塊，并把顏色改為一種鮮艷顏色，如黃色，然后把兩個圖重迭起來，若有不一致的地方就很容易看出來。 57.多段線的寬度問題。 當pline線設置成寬度不為0時，打印時就按這個線寬打印。如果這個多段線的寬度太小，就出不了寬度效果。（如以毫米為單位繪圖，設置多段線寬度為10，當你用1：100的比例打印時，就是0.1毫米。）所以多段線的寬度設置要考慮打印比例才行。而寬度是0時，就可按對象特性來設置（與其他對象一樣）。 58.在模型空間里畫的是虛線，打印出來也是虛線，可是怎么到了布局里打印出來就變成實線了呢？在布局里怎么打印虛線？ 估計是改變了線形比例，同時是采用的“比例到圖紙空間”的方法（這是 CAD的默認方法）。在線形設置對話框中把“比例到圖紙空間”前的鉤去掉。 59．怎樣把多條直線合并為一條？ 用 Group命令可以完成。 60.怎樣把多條線合并為多段線？ 用 PEDIT命令，此命令中有合并選項。 61.當AUTOCAD發生錯誤強行關閉后重新啟動AUTOCAD時，出現以下現象：文件 ——打開命令無法彈出窗口讓選擇文件了，輸出文件時也類似時怎么辦？ 應該修改FILEDIA變量。 62.如何在修改完ACAD.LSP后自動加載？ 可以將ACADLSPASDOC的系統變量修改為1。 63.如何修改尺寸標注的比例？
1.Ctrl+鼠標中鍵可以實現類似其他軟件的游動漫游。 2.雙擊鼠標中鍵相當于ZOOM E。 66.多重復制總是需要輸入M，如何簡化？
AUTOCAD會沿逆時針方向將圓上從第一斷點到第二斷點之間的那段圓弧刪除。 68.如何快速為平行直線作相切半圓？ 用圓角 FILLET 命令，比先畫相切圓然后再剪切的作法快10倍。 69.如何快速輸入距離？ 在定位點的提示下，輸入數字值，將下一個點沿光標所指方向定位到指定的距離，此功能通常在 “正交”或“捕捉”模式打開的狀態下使用。例如：執行命令:line；指定第一點: 指定點 ；指定下一點: 將光標移到需要的方向并輸入 5，回車即可。 70.如何使變得粗糙的圖形恢復平滑？ 有時候圖形經過縮放或zoom后，圖形會變得粗糙，如圓變成了多邊形，可以用重生成命令（regen）來恢復平滑狀態。 71.怎樣測量某個圖元的長度？
工具——選項——顯示——十字光標大小，調整就可以了。 73.如何改變拾取框的大小？ 工具——選項——選擇——拾取框大小，調整就可以了。 74.如何改變自動捕捉標記的大小？ 工具——選項——草圖——自動捕捉標記大小，調整就可以了。 75.復制圖形粘貼后總是離的很遠怎么辦？ 復制時使用帶基點復制：點編輯——帶基點復制。 76.如何測量帶弧線的多線段長度？ 用列表命令（list）！ 77.為什么堆疊按鈕不可用？ 堆疊的使用：一是要有堆疊符號（#、^、/）；二是要把堆疊的內容選中后才可以操作。 78.面域、塊、實體是什么概念? 面域是用閉合的外形或環創建的二維區域；塊是可組合起來形成單個對象(或稱為塊定義)的對象集合(一張圖在另一張圖中一般可作為塊)；實體有兩個概念,其一是構成圖形的有形的基本元素,其二是指三維物體.對于三維實體,可以使用"布爾運算"使之聯合,對于廣義的實體,可以使用"塊"或"組(group)"進行"聯合"。 79.什么是DXF文件格式？
只有圖線和尺寸線，而沒有尺寸數值的現成的圖紙。這是以前生產中的偷懶做法，現在用計算機制圖應該不提倡這樣做。 81.底版本的AutoCAD怎樣打開高版本的圖？ 轉換一下，可以用轉換軟件；或叫發給你的人存為低版本的格式再打開。 82.解決安裝cad2002后控制面板中有大塊白的現象。 方法如下：打開[開始]-----在[運行]框里輸入regedit，打開注冊表編輯器，找到下面項 HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Uninstall\{5783F2D7-0101-0804-0002-0060B0CE6BBA}，修改DisplayIcon，把“AutoCAD 2002安裝目錄\acad.exe,-1”中的-1，改為1。即可解決控制面板中刪除里面有一大塊白的現象。 83.如何使圖形只能看而不能修改？ 要是自己的圖把它全部圖層鎖定就行了，打開不會變的；如果以后不想用了，就把里面所有東西都炸碎也可以；還有一種方法是用lisp語言寫個加密程序，一旦運行后，圖就只能看，怎么也改不了了。 84.如何修改尺寸標注的關聯性?
文字屬性: 改為: 也可以在CAD2004特性里改:對正和方向. |
家好，我是Echa。
創作不易，喜歡的老鐵們加個關注，點個贊，后面會持續更新干貨，速速收藏，謝謝！
在現在的時代發展中，從以前的手寫簽名，逐漸衍生出了電子簽名。電子簽名和紙質手寫簽名一樣具有法律效應。電子簽名目前主要還是在需要個人確認的產品環節和司法類相關的產品上較多。
舉個常用的例子，大家都用過釘釘，釘釘上面就有電子簽名，相信大家這肯定是知道的。
那作為前端的我們如何實現電子簽名呢？其實在html5中已經出現了一個重要級別的輔助標簽，是啥呢？那就是canvas。下面我給大家分享分享幾個關于前端如何實現電子簽名經典案例以及實現方法。
Canvas（畫布）是在HTML5中新增的標簽用于在網頁實時生成圖像，并且可以操作圖像內容，基本上它是一個可以用JavaScript操作的位圖（bitmap）。Canvas 對象表示一個 HTML 畫布元素 -。它沒有自己的行為，但是定義了一個 API 支持腳本化客戶端繪圖操作。
大白話就是canvas是一個可以在上面通過javaScript畫圖的標簽，通過其提供的context(上下文)及Api進行繪制，在這個過程中canvas充當畫布的角色。
知道幾何的朋友都很清楚，線由點繪成，面由線繪成。
多點成線，多線成面。
所以我們實際只需要拿到當前觸摸的坐標點，進行成線處理就可以了。
在線預覽：https://langyuxiansheng.github.io/vue-sign-canvas/
Github：https://github.com/langyuxiansheng/vue-sign-canvas
vue-sign-canvas 一個基于canvas開發,封裝于Vue組件的通用手寫簽名板(電子簽名板),支持pc端和移動端,屬性支持自定義配置
組件模板使用
<template>
<div id="app">
<h2 class="title">Vue Sign Canvas 電子簽名板</h2>
<sign-canvas class="sign-canvas" ref="SignCanvas" :options="options" v-model="value" />
<img v-if="value" class="view-image" :src="value" width="150" height="150" />
<div class="config">
<ul class="ul-config">
<li class="li-c">
<span class="item-label">書寫速度:</span>
<span class="item-content">
<select name="isSign" v-model="options.isSign">
<option :value="true">簽名</option>
<option :value="false">寫字</option>
</select>
</span>
</li>
<li class="li-c">
<span class="item-label">顯示邊框/網格:</span>
<span class="item-content">
<select name="isSign" v-model="options.isShowBorder">
<option :value="true">顯示</option>
<option :value="false">不顯示</option>
</select>
</span>
</li>
<li class="li-c">
<span class="item-label">兼容高倍屏高清繪制:</span>
<span class="item-content">
<select name="isSign" v-model="options.isDpr">
<option :value="true">啟用</option>
<option :value="false">關閉</option>
</select>
</span>
</li>
<li class="li-c">
<span class="item-label">邊框寬度:</span>
<span class="item-content">
<input v-model="options.borderWidth" type="number" />
</span>
</li>
<li class="li-c">
<span class="item-label">下筆寬度:</span>
<span class="item-content">
<input v-model="options.writeWidth" type="number" />
</span>
</li>
<li class="li-c">
<span class="item-label">圖片類型:</span>
<span class="item-content">
<input v-model="options.imgType" type="text" />
</span>
</li>
<li class="li-c">
<span class="item-label">線條的邊緣類型:</span>
<span class="item-content">
<select name="lineCap" v-model="options.lineCap">
<option value="butt">平直的邊緣</option>
<option value="round">圓形線帽</option>
<option value="square">正方形線帽</option>
</select>
</span>
</li>
<li class="li-c">
<span class="item-label">線條交匯時邊角的類型:</span>
<span class="item-content">
<select name="lineCap" v-model="options.lineJoin">
<option value="bevel">創建斜角</option>
<option value="round">創建圓角</option>
<option value="miter">創建尖角</option>
</select>
</span>
</li>
<li class="li-c">
<span class="item-label">畫筆顏色:</span>
<span class="item-content">
<input type="color" v-model="options.writeColor" />
</span>
</li>
<li class="li-c">
<span class="item-label">背景色:</span>
<span class="item-content">
<input type="color" v-model="options.bgColor" />
</span>
</li>
</ul>
</div>
<div class="sign-btns">
<span id="clear" @click="canvasClear()">清空</span>
<span id="save" @click="saveAsImg()">保存</span>
<span id="save" @click="downloadSignImg()">下載</span>
</div>
</div>
</template>
<script>
import SignCanvas from "../packages";
export default {
components: { SignCanvas },
data() {
return {
value: null,
options: {
isDpr: false, //是否使用dpr兼容高倍屏 [Boolean] 可選
lastWriteSpeed: 1, //書寫速度 [Number] 可選
lastWriteWidth: 2, //下筆的寬度 [Number] 可選
lineCap: "round", //線條的邊緣類型 [butt]平直的邊緣 [round]圓形線帽 [square] 正方形線帽
lineJoin: "bevel", //線條交匯時邊角的類型 [bevel]創建斜角 [round]創建圓角 [miter]創建尖角。
canvasWidth: 350, //canvas寬高 [Number] 可選
canvasHeight: 370, //高度 [Number] 可選
isShowBorder: true, //是否顯示邊框 [可選]
bgColor: "#fcc", //背景色 [String] 可選
borderWidth: 1, // 網格線寬度 [Number] 可選
borderColor: "#ff787f", //網格顏色 [String] 可選
writeWidth: 5, //基礎軌跡寬度 [Number] 可選
maxWriteWidth: 30, // 寫字模式最大線寬 [Number] 可選
minWriteWidth: 5, // 寫字模式最小線寬 [Number] 可選
writeColor: "#101010", // 軌跡顏色 [String] 可選
isSign: true, //簽名模式 [Boolean] 默認為非簽名模式,有線框, 當設置為true的時候沒有任何線框
imgType: "png", //下載的圖片格式 [String] 可選為 jpeg canvas本是透明背景的
},
};
},
methods: {
/**
* 清除畫板
*/
canvasClear() {
this.$refs.SignCanvas.canvasClear();
},
/**
* 保存圖片
*/
saveAsImg() {
const img = this.$refs.SignCanvas.saveAsImg();
alert(`image 的base64：${img}`);
},
/**
* 下載圖片
*/
downloadSignImg() {
this.$refs.SignCanvas.downloadSignImg();
},
},
};
</script>
<style lang="less">
* {
margin: 0;
padding: 0;
}
.title {
padding: 20px;
text-align: center;
}
.sign-canvas {
display: block;
margin: 20px auto;
}
.view-image {
display: block;
margin: 20px auto;
}
.config {
width: 350px;
margin: 20px auto;
.ul-config {
.li-c {
display: flex;
align-items: center;
padding: 4px 10px;
.item-label {
font-size: 14px;
}
.item-content {
margin-left: 10px;
}
}
}
}
.sign-btns {
display: flex;
justify-content: space-between;
#clear,
#clear1,
#save {
display: inline-block;
padding: 5px 10px;
width: 76px;
height: 40px;
line-height: 40px;
border: 1px solid #eee;
background: #e1e1e1;
border-radius: 10px;
text-align: center;
margin: 20px auto;
cursor: pointer;
}
}
</style><div class="user-sign">
<template v-if="sign">
<img class="sign-image" :src="sign" alt="" srcset="" />
</template>
</div>
<script>
//局部注冊
import SignCanvas from "sign-canvas";
import util from "@util";
import { saveSignature } from "@/http";
export default {
name: "UserSign",
components: { SignCanvas },
data() {
return {
sign: null,
};
},
};
</script>
<style lang="scss" scoped>
.user-sign {
background: #e7e7e7;
height: 9.375rem;
position: relative;
.sign-image {
margin: 0 auto;
z-index: 9;
height: 100%;
transform: rotate(-90deg) scale(1.5);
display: block;
}
}
</style>如下圖：
在線預覽：http://szimek.github.io/signature_pad/
Github：https://github.com/szimek/signature_pad
Signature Pad是一個用于繪制平滑簽名的JavaScript庫。它基于HTML5畫布，使用基于Square發布的Smoother Signatures的可變寬度Bézier曲線插值。它適用于所有現代桌面和移動瀏覽器，不依賴任何外部庫。
核心代碼：
const canvas = document.querySelector("canvas");
const signaturePad = new SignaturePad(canvas);
// Returns signature image as data URL (see https://mdn.io/todataurl for the list of possible parameters)
signaturePad.toDataURL(); // save image as PNG
signaturePad.toDataURL("image/jpeg"); // save image as JPEG
signaturePad.toDataURL("image/jpeg", 0.5); // save image as JPEG with 0.5 image quality
signaturePad.toDataURL("image/svg+xml"); // save image as SVG data url
// Return svg string without converting to base64
signaturePad.toSVG(); // "<svg...</svg>"
signaturePad.toSVG({includeBackgroundColor: true}); // add background color to svg output
// Draws signature image from data URL (mostly uses https://mdn.io/drawImage under-the-hood)
// NOTE: This method does not populate internal data structure that represents drawn signature. Thus, after using #fromDataURL, #toData won't work properly.
signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...");
// Draws signature image from data URL and alters it with the given options
signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...", { ratio: 1, width: 400, height: 200, xOffset: 100, yOffset: 50 });
// Returns signature image as an array of point groups
const data = signaturePad.toData();
// Draws signature image from an array of point groups
signaturePad.fromData(data);
// Draws signature image from an array of point groups, without clearing your existing image (clear defaults to true if not provided)
signaturePad.fromData(data, { clear: false });
// Clears the canvas
signaturePad.clear();
// Returns true if canvas is empty, otherwise returns false
signaturePad.isEmpty();
// Unbinds all event handlers
signaturePad.off();
// Rebinds all event handlers
signaturePad.on();如下圖：
完整版：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<canvas></canvas>
<div>
<button onclick="cancel()">取消</button>
<button onclick="save()">保存</button>
</div>
</body>
<script>
// 配置內容
const config = {
width: 400, // 寬度
height: 200, // 高度
lineWidth: 5, // 線寬
strokeStyle: 'red', // 線條顏色
lineCap: 'round', // 設置線條兩端圓角
lineJoin: 'round', // 線條交匯處圓角
}
// 獲取canvas 實例
const canvas = document.querySelector('canvas')
// 設置寬高
canvas.width = config.width
canvas.height = config.height
// 設置一個邊框
canvas.style.border = '1px solid #000'
// 創建上下文
const ctx = canvas.getContext('2d')
// 設置填充背景色
ctx.fillStyle = 'transparent'
// 繪制填充矩形
ctx.fillRect(
0, // x 軸起始繪制位置
0, // y 軸起始繪制位置
config.width, // 寬度
config.height // 高度
);
// 保存上次繪制的 坐標及偏移量
const client = {
offsetX: 0, // 偏移量
offsetY: 0,
endX: 0, // 坐標
endY: 0
}
// 判斷是否為移動端
const mobileStatus = (/Mobile|Android|iPhone/i.test(navigator.userAgent))
// 初始化
const init = event => {
// 獲取偏移量及坐標
const { offsetX, offsetY, pageX, pageY } = mobileStatus ? event.changedTouches[0] : event
// 修改上次的偏移量及坐標
client.offsetX = offsetX
client.offsetY = offsetY
client.endX = pageX
client.endY = pageY
// 清除以上一次 beginPath 之后的所有路徑，進行繪制
ctx.beginPath()
// 根據配置文件設置相應配置
ctx.lineWidth = config.lineWidth
ctx.strokeStyle = config.strokeStyle
ctx.lineCap = config.lineCap
ctx.lineJoin = config.lineJoin
// 設置畫線起始點位
ctx.moveTo(client.endX, client.endY)
// 監聽 鼠標移動或手勢移動
window.addEventListener(mobileStatus ? "touchmove" : "mousemove", draw)
}
// 繪制
const draw = event => {
// 獲取當前坐標點位
const { pageX, pageY } = mobileStatus ? event.changedTouches[0] : event
// 修改最后一次繪制的坐標點
client.endX = pageX
client.endY = pageY
// 根據坐標點位移動添加線條
ctx.lineTo(pageX , pageY )
// 繪制
ctx.stroke()
}
// 結束繪制
const cloaseDraw = () => {
// 結束繪制
ctx.closePath()
// 移除鼠標移動或手勢移動監聽器
window.removeEventListener("mousemove", draw)
}
// 創建鼠標/手勢按下監聽器
window.addEventListener(mobileStatus ? "touchstart" : "mousedown", init)
// 創建鼠標/手勢 彈起/離開 監聽器
window.addEventListener(mobileStatus ? "touchend" :"mouseup", cloaseDraw)
// 取消-清空畫布
const cancel = () => {
// 清空當前畫布上的所有繪制內容
ctx.clearRect(0, 0, config.width, config.height)
}
// 保存-將畫布內容保存為圖片
const save = () => {
// 將canvas上的內容轉成blob流
canvas.toBlob(blob => {
// 獲取當前時間并轉成字符串，用來當做文件名
const date = Date.now().toString()
// 創建一個 a 標簽
const a = document.createElement('a')
// 設置 a 標簽的下載文件名
a.download = `${date}.png`
// 設置 a 標簽的跳轉路徑為 文件流地址
a.href = URL.createObjectURL(blob)
// 手動觸發 a 標簽的點擊事件
a.click()
// 移除 a 標簽
a.remove()
})
}
</script>
</html>Mozilla 程序從 Gecko 1.8 (Firefox 1.5 (en-US)) 開始支持 <canvas>。它首先是由 Apple 引入的，用于 OS X Dashboard 和 Safari。Internet Explorer 從 IE9 開始支持<canvas> ，更舊版本的 IE 中，頁面可以通過引入 Google 的 Explorer Canvas 項目中的腳本來獲得<canvas>支持。Google Chrome 和 Opera 9+ 也支持 <canvas>。
在小程序中我們如果需呀實現的話，也是同樣的原理哦，只是我們需要將創建實例和上下文的Api進行修改，因為小程序中是沒有dom，既然沒有dom，哪來的操作dom這個操作呢。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
