溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹HTML5中如何通過li-canvas輕松實現單圖、多圖、圓角圖繪制，單行文字、多行文字等，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
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>
...以上是“HTML5中如何通過li-canvas輕松實現單圖、多圖、圓角圖繪制，單行文字、多行文字等”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
