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