資訊專欄INFORMATION COLUMN
摘要：新增的是個強大的功能，估計大家平時都會用到，只是頻率不高，偶爾用它合成圖片，但是如果不進行封裝的話，代碼會很亂，所以對常用的畫圖繪制文字保存功能進行了封裝，目前還比較滿意，能夠快速完成繪圖任務(wù)，從容應(yīng)對需求變更，只需進行簡單配置即可。
Html5新增的canvas是個強大的功能， 估計大家平時都會用到，只是頻率不高，偶爾用它合成圖片，但是如果不進行封裝的話，代碼會很亂，所以對canvas常用的畫圖、繪制文字、保存功能進行了封裝，目前還比較滿意，能夠快速完成canvas繪圖任務(wù)，從容應(yīng)對需求變更，只需進行簡單配置即可。
li-canvas.js對Html5的canvas功能進行了封裝，方便進行單圖、多圖繪制、圓角圖片繪制、多行文字繪制、自動換行、圖片保存下載等功能.
github地址：https://github.com/501351981/...
主要功能圖片繪制：單圖/多圖繪制、圓角圖片繪制.
文字繪制：多段文字繪制、自動換行.
圖片保存：獲取圖片數(shù)據(jù)、下載圖片到本地，支持自定義下載圖片名.
npm安裝# npm 安裝 npm install --save li-canvas直接引用
在html中直接引入js文件.
如何使用 實例化使用li-canvas時需要先實例化對象，new LiCanvas(canvas_id,options),傳入canvas的id，options選填，可以設(shè)置canvas背景和默認文字樣式等
...
...
...
圖片繪制
繪制單張圖片
調(diào)用addDrawImageTask(image)，其中參數(shù)image是一個對象，包括
src：圖片的url地址
x：圖片在canvas畫布上的左上角x坐標
y：圖片在canvas畫布上的左上角y坐標
width：圖片繪制寬度
height：圖片繪制高度
borderRadius：圖片圓角半徑
調(diào)用addDrawImageTask(image)時，并沒有立即繪制圖片，而是添加了一個繪圖任務(wù)，只有調(diào)用draw(callback)時，才執(zhí)行繪圖任務(wù)，執(zhí)行完成調(diào)用callback回調(diào)函數(shù)
為什么這么做呢？因為圖片繪制的時候需要先下載圖片，這是個異步操作，所以先添加到任務(wù)列表，調(diào)用draw()的時候再按照任務(wù)添加順序依次執(zhí)行
...
...
...
繪制多圖
可以連續(xù)多次調(diào)用addDrawImageTask(image)，也可以傳圖一個數(shù)組
...
...
...
繪制圓角或圓形圖片
只需要設(shè)置borderRadius即可
...
...
...
繪制文字
繪制一段文字
調(diào)用addDrawTextTask(text,style)
text:要繪制的文字
style：文字樣式，包括
x：文字繪制起始位置左上角坐標x y：文字繪制其實位置左上角坐標y width：文字一行的寬度，超出會自動進行換行 fontSize：文字大小，整數(shù)，單位為px fontWeight：文字粗細bold、bolder等或者400，500，600...同css的font-weight fontFamily：文字字體，同css lineHeight：行高，整數(shù)，單位px color：顏色 marginBottom：如果有多段文字，還可以指定段落之間的距離
文字繪制，同樣是異步的，知道調(diào)用draw(callback)才真正進行繪制
...
...
...
繪制多段文字
方法1：反復調(diào)用addDrawTextTask(text,style)，同上
方法2：text可以傳入一個數(shù)組，可以共用style
...
...
...
其中style也可以在對象實例化的時候傳入一個默認值，避免反復設(shè)置一些共用的style
...
...
...
如果多段文字中，有一段的文字需要設(shè)置不同的樣式，也可以多帶帶指定樣式，如下， 是不是很靈活~
...
...
...
保存下載圖片
下載圖片
下載為png圖片：saveToPng("文件名")
下載為jpeg圖片：saveToJpeg("文件名")
下載為gif圖片：saveToGif("文件名")
注意：下載圖片必須在draw()的回調(diào)函數(shù)中調(diào)用才可以生效
...
...
...
獲取圖片數(shù)據(jù)
有時候，我們并不想下載圖片，比如在微信瀏覽器中，我們其實是希望用戶長按圖片保存，此時，我們希望canvas合成的圖片數(shù)據(jù)，插入到img的src中
調(diào)用：getImageData()可以獲取合成的圖片數(shù)據(jù)
...
...
...
github地址：https://github.com/501351981/...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/99571.html
摘要：中文字的默認排列是橫向排列的，但一些特殊情況下是需要文字豎向排列的。單行文字豎向排列英文的時候需要加上這句，自動換行說明實現(xiàn)文字單行豎向排列，只需要把寬度設(shè)置為剛好容納一個字體的寬度即可。 html中文字的默認排列是橫向排列的，但一些特殊情況下是需要文字豎向排列的。 單行文字豎向排列 showImg(https://segmentfault.com/img/bVbuvoD?w=62&h...
摘要：中文字的默認排列是橫向排列的，但一些特殊情況下是需要文字豎向排列的。單行文字豎向排列英文的時候需要加上這句，自動換行說明實現(xiàn)文字單行豎向排列，只需要把寬度設(shè)置為剛好容納一個字體的寬度即可。 html中文字的默認排列是橫向排列的，但一些特殊情況下是需要文字豎向排列的。 單行文字豎向排列 showImg(https://segmentfault.com/img/bVbuvoD?w=62&h...
摘要：支持設(shè)置圓角，并且能夠精確的控制圓角位置。如果你想要設(shè)置的顯示出來，必須設(shè)置為。如此驚艷的效果得益于內(nèi)置的動畫驅(qū)動，你能夠結(jié)合來實現(xiàn)難以置信的動畫效果。一切只需要在你合理的編寫好后，調(diào)用和來啟動停止動畫。 showImg(https://segmentfault.com/img/remote/1460000009148011); 簡介 歡迎使用SuperTextView，這篇文檔將會向...
閱讀 1083·2023-04-25 15:42
閱讀 3683·2021-11-02 14:38
閱讀 2951·2021-09-30 09:48
閱讀 1530·2021-09-23 11:22
閱讀 3502·2021-09-06 15:02
閱讀 3252·2021-09-04 16:41
閱讀 676·2021-09-02 15:41
閱讀 2089·2021-08-26 14:13
