資訊專欄INFORMATION COLUMN
摘要：新增的是個(gè)強(qiáng)大的功能，估計(jì)大家平時(shí)都會(huì)用到，只是頻率不高，偶爾用它合成圖片，但是如果不進(jìn)行封裝的話，代碼會(huì)很亂，所以對(duì)常用的畫圖繪制文字保存功能進(jìn)行了封裝，目前還比較滿意，能夠快速完成繪圖任務(wù)，從容應(yīng)對(duì)需求變更，只需進(jìn)行簡(jiǎn)單配置即可。
Html5新增的canvas是個(gè)強(qiáng)大的功能， 估計(jì)大家平時(shí)都會(huì)用到，只是頻率不高，偶爾用它合成圖片，但是如果不進(jìn)行封裝的話，代碼會(huì)很亂，所以對(duì)canvas常用的畫圖、繪制文字、保存功能進(jìn)行了封裝，目前還比較滿意，能夠快速完成canvas繪圖任務(wù)，從容應(yīng)對(duì)需求變更，只需進(jìn)行簡(jiǎn)單配置即可。
li-canvas.js對(duì)Html5的canvas功能進(jìn)行了封裝，方便進(jìn)行單圖、多圖繪制、圓角圖片繪制、多行文字繪制、自動(dòng)換行、圖片保存下載等功能.
github地址：https://github.com/501351981/...
主要功能圖片繪制：?jiǎn)螆D/多圖繪制、圓角圖片繪制.
文字繪制：多段文字繪制、自動(dòng)換行.
圖片保存：獲取圖片數(shù)據(jù)、下載圖片到本地，支持自定義下載圖片名.
npm安裝# npm 安裝 npm install --save li-canvas直接引用
在html中直接引入js文件.
如何使用 實(shí)例化使用li-canvas時(shí)需要先實(shí)例化對(duì)象，new LiCanvas(canvas_id,options),傳入canvas的id，options選填，可以設(shè)置canvas背景和默認(rèn)文字樣式等
...
...
...
圖片繪制
繪制單張圖片
調(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í)，并沒(méi)有立即繪制圖片，而是添加了一個(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í)行
...
...
...
繪制多圖
可以連續(xù)多次調(diào)用addDrawImageTask(image)，也可以傳圖一個(gè)數(shù)組
...
...
...
繪制圓角或圓形圖片
只需要設(shè)置borderRadius即可
...
...
...
繪制文字
繪制一段文字
調(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)行繪制
...
...
...
繪制多段文字
方法1：反復(fù)調(diào)用addDrawTextTask(text,style)，同上
方法2：text可以傳入一個(gè)數(shù)組，可以共用style
...
...
...
其中style也可以在對(duì)象實(shí)例化的時(shí)候傳入一個(gè)默認(rèn)值，避免反復(fù)設(shè)置一些共用的style
...
...
...
如果多段文字中，有一段的文字需要設(shè)置不同的樣式，也可以多帶帶指定樣式，如下， 是不是很靈活~
...
...
...
保存下載圖片
下載圖片
下載為png圖片：saveToPng("文件名")
下載為jpeg圖片：saveToJpeg("文件名")
下載為gif圖片：saveToGif("文件名")
注意：下載圖片必須在draw()的回調(diào)函數(shù)中調(diào)用才可以生效
...
...
...
獲取圖片數(shù)據(jù)
有時(shí)候，我們并不想下載圖片，比如在微信瀏覽器中，我們其實(shí)是希望用戶長(zhǎng)按圖片保存，此時(shí)，我們希望canvas合成的圖片數(shù)據(jù)，插入到img的src中
調(diào)用：getImageData()可以獲取合成的圖片數(shù)據(jù)
...
...
...
github地址：https://github.com/501351981/...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99571.html
摘要：中文字的默認(rèn)排列是橫向排列的，但一些特殊情況下是需要文字豎向排列的。單行文字豎向排列英文的時(shí)候需要加上這句，自動(dòng)換行說(shuō)明實(shí)現(xiàn)文字單行豎向排列，只需要把寬度設(shè)置為剛好容納一個(gè)字體的寬度即可。 html中文字的默認(rèn)排列是橫向排列的，但一些特殊情況下是需要文字豎向排列的。 單行文字豎向排列 showImg(https://segmentfault.com/img/bVbuvoD?w=62&h...
摘要：中文字的默認(rèn)排列是橫向排列的，但一些特殊情況下是需要文字豎向排列的。單行文字豎向排列英文的時(shí)候需要加上這句，自動(dòng)換行說(shuō)明實(shí)現(xiàn)文字單行豎向排列，只需要把寬度設(shè)置為剛好容納一個(gè)字體的寬度即可。 html中文字的默認(rèn)排列是橫向排列的，但一些特殊情況下是需要文字豎向排列的。 單行文字豎向排列 showImg(https://segmentfault.com/img/bVbuvoD?w=62&h...
摘要：支持設(shè)置圓角，并且能夠精確的控制圓角位置。如果你想要設(shè)置的顯示出來(lái)，必須設(shè)置為。如此驚艷的效果得益于內(nèi)置的動(dòng)畫驅(qū)動(dòng)，你能夠結(jié)合來(lái)實(shí)現(xiàn)難以置信的動(dòng)畫效果。一切只需要在你合理的編寫好后，調(diào)用和來(lái)啟動(dòng)停止動(dòng)畫。 showImg(https://segmentfault.com/img/remote/1460000009148011); 簡(jiǎn)介 歡迎使用SuperTextView，這篇文檔將會(huì)向...
閱讀 1010·2023-04-25 15:42
閱讀 3604·2021-11-02 14:38
閱讀 2896·2021-09-30 09:48
閱讀 1437·2021-09-23 11:22
閱讀 3399·2021-09-06 15:02
閱讀 3195·2021-09-04 16:41
閱讀 613·2021-09-02 15:41
閱讀 2025·2021-08-26 14:13
