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

目录

Canvas实现多个圆形进度条显示百分比并绑定各自的click事件 目录 实现效果制作单个圆形进度条 详情请参照HTML5效果Canvas实现圆形进度条并显示数字百分比 制作多个圆形进度条 html代码js代码绘制多个圆形进度条的完整代码 小记

实现效果

制作单个圆形进度条

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

制作多个圆形进度条

1.html代码

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

2.js代码

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

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