Canvas实现多个圆形进度条显示百分比，并绑定各自的click事件

Canvas实现多个圆形进度条显示百分比，并绑定各自的click事件

目录

实现效果

---

制作单个圆形进度条

详情请参照HTML5效果：Canvas实现圆形进度条并显示数字百分比

---

制作多个圆形进度条

1.html代码

 <div id="contain"></div> 
 <!---定义一个div块，用于放置canvas--->

2.js代码

保存到circle.js中，并放置在与html文件相同的根目录下。

function initThis(){
   
         //初始化数据,json数组
         //说明：id为标识id（唯一）,name为名字,num为进度 
         var init= [{
  "num":100,"name":"task-2","id":1},   
                    {
  "num":100,"name":"task-3","id":2},                                                                  
                    {
  "num":100,"name":"task-4","id":3},
                    {
  "num":60,"name":"task-5","id":4}];

         var container = document.getElementById('contain'