溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹HTML5中如何通過li-canvas輕松實(shí)現(xiàn)單圖、多圖、圓角圖繪制，單行文字、多行文字等，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
Html5新增的canvas是個(gè)強(qiáng)大的功能， 估計(jì)大家平時(shí)都會(huì)用到，只是頻率不高，偶爾用它合成圖片，但是如果不進(jìn)行封裝的話，代碼會(huì)很亂，所以對(duì)canvas常用的畫圖、繪制文字、保存功能進(jìn)行了封裝，目前還比較滿意，能夠快速完成canvas繪圖任務(wù)，從容應(yīng)對(duì)需求變更，只需進(jìn)行簡單配置即可。
li-canvas.js
對(duì)Html5的canvas功能進(jìn)行了封裝，方便進(jìn)行單圖、多圖繪制、圓角圖片繪制、多行文字繪制、自動(dòng)換行、圖片保存下載等功能.
github地址： github.com/501351981/l…
主要功能
•圖片繪制：單圖/多圖繪制、圓角圖片繪制. •文字繪制：多段文字繪制、自動(dòng)換行. •圖片保存：獲取圖片數(shù)據(jù)、下載圖片到本地，支持自定義下載圖片名.
npm安裝
# npm 安裝 npm install --save li-canvas
直接引用
在html中直接引入js文件.
<script src="dist/li-canvas.js"></script>
如何使用
實(shí)例化
使用li-canvas時(shí)需要先實(shí)例化對(duì)象，new LiCanvas(canvas_id,options),傳入canvas的id，options選填，可以設(shè)置canvas背景和默認(rèn)文字樣式等
...
<script src="../dist/li-canvas.js"></script>
...
<body>
<canvas id="test" width="1563" height="1180"></canvas>
<script> var canvas=new LiCanvas('test') </script>
</body>
...圖片繪制
•繪制單張圖片
調(diào)用addDrawImageTask(image)，其中參數(shù)image是一個(gè)對(duì)象，包括
src：圖片的url地址
x：圖片在canvas畫布上的左上角x坐標(biāo)
y：圖片在canvas畫布上的左上角y坐標(biāo)
width：圖片繪制寬度
height：圖片繪制高度
borderRadius：圖片圓角半徑
調(diào)用addDrawImageTask(image)時(shí)，并沒有立即繪制圖片，而是添加了一個(gè)繪圖任務(wù)，只有調(diào)用draw(callback)時(shí)，才執(zhí)行繪圖任務(wù)，執(zhí)行完成調(diào)用callback回調(diào)函數(shù)
為什么這么做呢？因?yàn)閳D片繪制的時(shí)候需要先下載圖片，這是個(gè)異步操作，所以先添加到任務(wù)列表，調(diào)用draw()的時(shí)候再按照任務(wù)添加順序依次執(zhí)行
...
<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坐標(biāo)
y:0,//左上角的y坐標(biāo)
width:1563,//圖片繪制寬度
height:1180,//圖片繪制高度
borderRadius:0 //圖片圓角半徑
}
var canvas=new LiCanvas('test')
canvas.addDrawImageTask(bg) //添加繪圖任務(wù)，并沒有立即進(jìn)行繪圖
canvas.draw(()=>{
console.log("繪制完成")
}) </script>
</body>
...•繪制多圖
可以連續(xù)多次調(diào)用addDrawImageTask(image)，也可以傳圖一個(gè)數(shù)組
...
<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) //多次調(diào)用實(shí)現(xiàn)多圖繪制
canvas.addDrawImageTask(imgs) //直接傳入一個(gè)數(shù)組也可以實(shí)現(xiàn)多圖繪制
canvas.draw(()=>{
console.log("繪制完成")
}) </script>
</body>
...•繪制圓角或圓形圖片
只需要設(shè)置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 //設(shè)置圓角半徑，當(dāng)圓角半徑為正方形邊長一半時(shí)，就是一個(gè)圓形了
}
var canvas=new LiCanvas('test')
canvas.addDrawImageTask(img1)
canvas.draw(()=>{
console.log("繪制完成")
}) </script>
</body>
...繪制文字
•繪制一段文字
調(diào)用addDrawTextTask(text,style)
text:要繪制的文字
style：文字樣式，包括 x：文字繪制起始位置左上角坐標(biāo)x
y：文字繪制其實(shí)位置左上角坐標(biāo)y
width：文字一行的寬度，超出會(huì)自動(dòng)進(jìn)行換行
fontSize：文字大小，整數(shù)，單位為px
fontWeight：文字粗細(xì)bold、bolder等或者400，500，600...同css的font-weight
fontFamily：文字字體，同css
lineHeight：行高，整數(shù)，單位px
color：顏色
marginBottom：如果有多段文字，還可以指定段落之間的距離
文字繪制，同樣是異步的，知道調(diào)用draw(callback)才真正進(jìn)行繪制
...
<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：反復(fù)調(diào)用addDrawTextTask(text,style)，同上
方法2：text可以傳入一個(gè)數(shù)組，可以共用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也可以在對(duì)象實(shí)例化的時(shí)候傳入一個(gè)默認(rèn)值，避免反復(fù)設(shè)置一些共用的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>
...如果多段文字中，有一段的文字需要設(shè)置不同的樣式，也可以單獨(dú)指定樣式，如下， 是不是很靈活~
...
<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()的回調(diào)函數(shù)中調(diào)用才可以生效
...
<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>
...•獲取圖片數(shù)據(jù)
有時(shí)候，我們并不想下載圖片，比如在微信瀏覽器中，我們其實(shí)是希望用戶長按圖片保存，此時(shí)，我們希望canvas合成的圖片數(shù)據(jù)，插入到img的src中
調(diào)用：getImageData()可以獲取合成的圖片數(shù)據(jù)
...
<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輕松實(shí)現(xiàn)單圖、多圖、圓角圖繪制，單行文字、多行文字等”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼