天天看点

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)

更多用法请自由发挥!

继续阅读