通過li-canvas輕鬆實現單圖、多圖、圓角圖繪製，單行文字、多行文字等

Canvas · 發表 2018-11-29 21:22:06

摘要： Html5新增的canvas是個強大的功能，估計大家平時都會用到，只是頻率不高，偶爾用它合成圖片，但是如果不進行封裝的話，程式碼會很亂，所以對canvas常用的畫圖、繪製文字、儲存功能進行了封裝，目前還比較滿意，能夠快速完成canvas繪圖任務，從容應對需求變更，只需進行簡單配置即可。 ...

Html5新增的canvas是個強大的功能，估計大家平時都會用到，只是頻率不高，偶爾用它合成圖片，但是如果不進行封裝的話，程式碼會很亂，所以對canvas常用的畫圖、繪製文字、儲存功能進行了封裝，目前還比較滿意，能夠快速完成canvas繪圖任務，從容應對需求變更，只需進行簡單配置即可。

li-canvas.js

對Html5的canvas功能進行了封裝，方便進行單圖、多圖繪製、圓角圖片繪製、多行文字繪製、自動換行、圖片儲存下載等功能.

github地址： ofollow,noindex">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…

本次給大家推薦一個免費的學習群，裡面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。

對web開發技術感興趣的同學，歡迎加入Q群：943129070，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視訊資料。

最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。