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,Arial,'Helvetica Neue',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 } }) canvas.addDrawTextTask("要繪制的文字段落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 } }) canvas.addDrawTextTask([{ 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輕松實現單圖、多圖、圓角圖繪制，單行文字、多行文字等，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
