資訊專欄INFORMATION COLUMN
摘要：模塊最終使用方法進行查找并自動添加為查找。百分比文字樣式非必填默認。百分比文字大小會通過的值自動計算百分數的數字并添加百分號。百分比文字現實的顏色。
原文鏈接 使用
引入文件:
./build/js/iantooPercent.js
并在頁面執行
該模塊不依賴任何三方模塊，并于iantoo系列其它功能可同時存在。 兼容性所有支持canvas的瀏覽器均支持該模塊可以參考canvas基本支持屬性
預覽iantooPercent
Github API elcanvas對應的ID名稱,必填。
模塊最終使用querySelector方法進行DOM 查找,并自動添加#為id查找。line指邊線,也就是背景中的整圓。
line.size
非必填、number,默認:4邊線的粗細。
line.color
非必填、string,默認:"#D3EDFD"，十六進制顏色值。邊線的顏色。
subject主要旋轉部分的樣式設置
subject.size
非必填、number,默認:8。旋轉主線條的粗細。
subject.color
非必填、string,默認:"#57C0FD"，十六進制顏色值。旋轉的主線條的顏色。
subject.Start_Position
非必填、number,默認:0，取值:0,1,2,3。制旋轉主線條的開始位置，取值:0,1,2,3 ;按照時鐘的時間說明 0代表從00點鐘方向開始; 1代表是3點鐘方向,依此類推 。
subject.percentage
非必填、number,默認:0，取值:0～1。旋轉的百分比，取值在0～1之間，如果浮點數在小數點后三位的數，不會進行四舍五入，而是通過直接取小數點后面兩位數為準。
subject.content
非必填、string,默認:"附加文字"除顯示百分比數字以外，的附加內容顯示文字，將顯示在百分比內容下面，此處并未對傳入字符長度做限制。
perStyle百分比文字樣式
perStyle.fontSize
非必填、number,默認:30。百分比文字大小,會通過subject.percentage的值自動計算百分數的數字并添加百分號。
perStyle.color
非必填、string,默認:"#EF5A3C"。百分比文字現實的顏色。
contentStyle.附加內容的樣式
contentStyle.fontSize
非必填、number,默認:16。附加文字內容顯示的字體大小
contentStyle.color
非必填、string,默認:"#77828C"。附加內容的文字顏色。
注：該模塊必須對canvas標簽設置style的寬高屬性，或者通過class屬性指定寬高。源碼中會通過獲取canvas的offsetWidth和offsetHeight去重新設置canvas的width和height屬性，但這并不影響自身style屬性下所對應顯示的大小。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108108.html
摘要：前提有時候在項目中會有用到進度條的情況，使用也可以實現，但是對于性能不好的設備，或者網絡不好的情況下，卡頓現象非常明顯，避免出現不流暢的尷尬情況，所以記錄一下，使用來實現的方法。 前提：有時候在項目中會有用到進度條的情況，使用css3也可以實現，但是對于性能不好的設備，或者網絡不好的情況下，卡頓現象非常明顯，避免出現不流暢的尷尬情況，所以記錄一下，使用canvas來實現的方法。 效果圖...
摘要：前提有時候在項目中會有用到進度條的情況，使用也可以實現，但是對于性能不好的設備，或者網絡不好的情況下，卡頓現象非常明顯，避免出現不流暢的尷尬情況，所以記錄一下，使用來實現的方法。 前提：有時候在項目中會有用到進度條的情況，使用css3也可以實現，但是對于性能不好的設備，或者網絡不好的情況下，卡頓現象非常明顯，避免出現不流暢的尷尬情況，所以記錄一下，使用canvas來實現的方法。 效果圖...
摘要：參考環形路徑平移的方案，做一些調整，就可以得到型路徑平移的寫法這里初始把元素放在了上面那個半圓環的圓心，然后在的關鍵幀位置切換為下面的半圓環路徑。 最近在CSS Secrets一書看到了這樣一節：讓一個元素沿環形路徑平移。這是一個css動畫的問題，但卻沒有看上去那么簡單，其關鍵點是元素是平移的，也就是說，元素自身并不發生旋轉，只是穩定地沿著一個環形的路徑移動，像這樣： showImg(...
閱讀 925·2021-11-08 13:22
閱讀 2849·2021-09-29 09:45
閱讀 2827·2021-09-09 11:52
閱讀 2262·2019-08-30 13:20
閱讀 3748·2019-08-29 13:28
閱讀 1362·2019-08-29 12:32
閱讀 2727·2019-08-29 11:10
閱讀 1648·2019-08-26 13:34
