天天看點

canvas js 繪圖插件_</JavaScript>環形進度條插件(v2)

canvas js 繪圖插件_</JavaScript>環形進度條插件(v2)

之前寫的 cpbBuilder.js 完全是覺得好玩兒,沒有實際使用,上個星期自己在項目上使用了一些,覺得有些東西用起來并不是很舒坦,主要就是每個進度條的設定,要統一在 JS 中去設定,這樣在修改的時候不是很直覺,不過好處是可以使用 JS 配合 JSON,第二個版本在 canvas 标簽中使用了 data-* 屬性,也就是圖個友善,至于具體使用哪個版本可以自己根據需要選擇,代碼是完全開源的,可以随便用,随便改。

王世傑:純JS環形進度條生成插件​zhuanlan.zhihu.com

canvas js 繪圖插件_</JavaScript>環形進度條插件(v2)

插件代碼:

// cpbBuilder.js
           

使用:

<!-- 建立 canvas 元素 -->
           

插件執行個體化和設定:

// usage
           

插件運作:

// 因為參數是在元素 data-* 屬性中設定的,是以可以周遊元素運作
           
canvas js 繪圖插件_&amp;lt;/JavaScript&amp;gt;環形進度條插件(v2)

更多用法請自由發揮!

繼續閱讀