Html5新增的canvas是個強大的功能， 估計大家平常都會用到，只是頻率不高，偶爾用它合成圖片，但是如果不進行封裝的話，程式碼會很亂，所以對canvas常用的畫圖、繪製文字、保存功能進行了封裝，目前還比較滿意，能夠快速完成canvas繪圖任務，從容應對需求變更，只需進行簡單配置即可。
li-canvas.js對Html5的canvas功能進行了封裝，方便進行單圖、多圖繪製、圓角圖片繪製、多行文字繪製、自動換行、圖片保存下載等功能.
github網址：github.com/501351981/l…
主要功能•圖片繪製：單圖/多圖繪製、圓角圖片繪製. •文字繪製：多段文字繪製、自動換行. •圖片儲存：取得圖片資料、下載圖片到本機，支援自訂下載圖片名稱.
npm安裝# npm 安裝npm install --save li-canvas直接引用
在html中直接引入js檔.
<script src=dist/li-canvas.js></script>如何使用實例化
使用li-canvas時需要先實例化對象， new LiCanvas(canvas_id,options),傳入canvas的id，options選填，可以設定canvas背景和預設文字樣式等
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180></canvas><script> var canvas= new LiCanvas('test') </script></body> ...圖片繪製•繪製單張圖片
呼叫addDrawImageTask(image)，其中參數image是一個對象，包括
src：圖片的url位址
x：圖片在canvas畫布上的左上角x座標
y：圖片在canvas畫布上的左上角y座標
width：圖片繪製寬度
height：圖片繪製高度
borderRadius：圖片圓角半徑
當呼叫addDrawImageTask(image)時，並沒有立即繪製圖片，而是新增了一個繪圖任務，只有在呼叫draw(callback)時，才執行繪圖任務，執行完成呼叫callback回呼函數
為什麼要這麼做呢？因為圖片繪製的時候需要先下載圖片，這是個非同步操作，所以先加入任務列表，呼叫draw()的時候再依照任務新增順序依序執行
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px solid red></canvas><img src=./bg.jpg id=img width=0 height=0><script> var bg={ src:document.getElementById('img').src,//或圖片的url位址x:0,//左上角的x座標y:0,//左上角的y座標width:1563,//圖片繪製寬度height:1180,//圖片繪製高度borderRadius:0 //圖片圓角半徑} var canvas=new LiCanvas('test') canvas.addDrawImageTask(bg) //新增繪圖任務，並沒有立即進行繪圖canvas.draw(()=>{ console.log(繪製完成) }) </script></body> . ..•繪製多圖
可以連續多次呼叫addDrawImageTask(image)，也可以傳圖一個數組
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px solid red></canvas><script> var img1={ src:http://*****.com/***.png, x:0, y:0, width:1563, height:1180, borderRadius:0 } var img2={ src:http://*****.com/***.png, x:0, y: 0, width:1563, height:1180, borderRadius:0 } var imgs=[ { src:http://*****.com/***.png, x:0, y:0, width:100, height:100, borderRadius:0 }, { src:http://*****.com/***.png, x:0, y:0, width:100, height:100, borderRadius:0 } ] var canvas=new LiCanvas('test') canvas.addDrawImageTask(img1) canvas.addDrawImageTask(img2) //多次呼叫實作多重圖繪製canvas.addDrawImageTask(imgs) //直接傳入一個陣列也可以實作多圖繪製canvas.draw(()=>{ console.log(繪製完成) }) </script></body> ...•繪製圓角或圓形圖片
只需要設定borderRadius即可
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px solid red></canvas><script> var img1={ src:http://*****.com/***.png, x:0, y:0, width:100, height:100, borderRadius:50 //設定圓角半徑，當圓角半徑為正方形邊長一半時，就是一個圓形了} var canvas=new LiCanvas(' test') canvas.addDrawImageTask(img1) canvas.draw(()=>{ console.log(繪製完成) }) </script></body> ...繪製文字•繪製一段文字
呼叫addDrawTextTask(text,style)
text:要繪製的文字
style：文字樣式，包含x：文字繪製起始位置左上角座標x
y：文字繪製其實位置左上角座標y
width：文字一行的寬度，超出會自動進行換行
fontSize：文字大小，整數，單位為px
fontWeight：文字粗細bold、bolder等或400，500，600...同css的font-weight
fontFamily：文字字體，同css
lineHeight：行高，整數，單位px
color：顏色
marginBottom：如果有多段文字，還可以指定段落之間的距離
文字繪製，同樣是異步的，知道呼叫draw(callback)才真正進行繪製
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px solid red></canvas><script> var canvas=new LiCanvas('test') canvas.addDrawTextTask(要繪製的文字,{ x:110, y:496, width:1340, fontSize:54, fontWeight:'bolder', fontFamily:PingFangSC-Regular,'Microsoft YaHei',SimSun, fontFamily:PingFangSC-Regular,'Microsoft YaHei',SimSun,Sunial,'Helvetica,a ',sans-serif, lineHeight:70, color:'#1a1a1a', marginBottom:40 }) canvas.draw(()=>{ console.log(繪製完成) }) </script></body> ...•繪製多段文字
方法1：重複呼叫addDrawTextTask(text,style)，同上
方法2：text可以傳入一個數組，可以共用style
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px solid red></canvas><script> var canvas=new LiCanvas('test') canvas.addDrawTextTask([要繪製的文字段落1,要繪製的文字段落2],{ x:110, y:496, width:1340, fontSize:54, fontWeight:'bolder', fontFamily:PingFangSC-Regular,' Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, color:'#1a1a1a', marginBottom:40 }) canvas.draw(()=>{ console.log(繪製完成) }) </script></body> ...其中style也可以在物件實例化的時候傳入一個預設值，避免重複設定一些共用的style
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px solid red></canvas><script> var canvas=new LiCanvas('test',{ fontStyle:{ fontSize:20, fontFamily:PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, color:'#1a1a1a', marginBottom:40 } }) 易寫繪製的文字段落1,{ x:110, y:496, width:1340, }) canvas.addDrawTextTask(要繪製的文字段落2,{ x:110, y:696, width:1340, }) canvas.draw(()=>{ console.log(繪製完成) }) </script></body> ...如果多段文字中，有一段的文字需要設定不同的樣式，也可以單獨指定樣式，如下， 是不是很靈活~
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px solid red></canvas><script> var canvas=new LiCanvas('test',{ fontStyle:{ fontSize:20, fontFamily:PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, color:'#1a1a1a', marginBottom:40 } }) 易寫{ text:要繪製的段落文字1, fontSize：60 },要繪製的文字段落2,要繪製的文字段落3],{ x:110, y:496, width:1340, }) canvas.draw(()=>{ console.log(繪製完成) }) </script></body> ...儲存下載圖片
•下載圖片
下載為png圖片：saveToPng(檔名)
下載為jpeg圖片：saveToJpeg(檔名)
下載為gif圖片：saveToGif(檔名)
注意：下載圖片必須在draw()的回呼函數中呼叫才可以生效
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px solid red></canvas><script> var bg={ src:http://***.jpg, x:0, y:0, width:1563, height:1180, borderRadius:0 } var canvas=new LiCanvas('test') canvas.addDrawImageTask(bg) canvas.draw(()=>{ canvas.saveToPng(li-canvas) } ) </script></body> ...•取得圖片數據
有時候，我們不想下載圖片，例如在微信瀏覽器中，我們其實是希望用戶長按圖片保存，此時，我們希望canvas合成的圖片數據，插入到img的src中
呼叫：getImageData()可以取得合成的圖片數據
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px solid red></canvas><img src=./bg.jpg id=img ><script> var bg={ src:http://***.jpg, x:0, y:0, width:1563, height:1180, borderRadius:0 } var canvas=new LiCanvas('test') canvas.addDrawImageTask(bg ) canvas.draw(()=>{ var src=canvas.getImageData() document.getElementById('img').src=src }) </script></body> ...github網址：github.com/501351981/l…
總結以上所述是小編給大家介紹的HTML5中透過li-canvas輕鬆實現單圖、多圖、圓角圖繪製，單行文字、多行文字等，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對VeVb武林網站的支持！