* @param {type} radius 圆环半径 * @param {type} linewidth 圆环宽度 * @param {type} strokestyle 默认背景 * @param {type} fillstylearray 数组，圆环色块颜色 * @param {type} captype 类型：round是圆角，square正方形顶帽，butt是正常 * @param {type} percentarray ，数字，每个占据的百分比 * @param {type} startangle 开始的角度 * @param {type} criclex，cricley 圆心坐标，一般是canvas的一半，例如：canvas给的宽度是250，高度是250，那么criclex是125
使用方法
var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var ring = new ring("80", "25", "#ccc", ["#a1b91d", "#e9636a", "#e7ba21"], "round"); ring.drawring(ctx, 2 * math.pi / 3, [20, 50, 30],125,125);//占据的百分比分别是20%，50%，30%
源代码
源代码很简单，欢迎大家扩展！
function circle(radius, linewidth, strokestyle, fillstylearray, captype) { this.radius = radius; // 圆环半径 this.linewidth = linewidth; // 圆环边的宽度 this.strokestyle = strokestyle; //边的颜色 this.fillstyle = fillstylearray; //填充色 this.linecap = captype;}circle.prototype.draw = function (ctx,criclex,cricley) { ctx.beginpath(); ctx.arc(criclex, cricley, this.radius, 0, math.pi * 2, true); // 坐标为90的圆，这里起始角度是0，结束角度是math.pi*2 ctx.linewidth = this.linewidth; ctx.strokestyle = this.strokestyle; ctx.stroke(); // 这里用stroke画一个空心圆，想填充颜色的童鞋可以用fill方法};function ring(radius, linewidth, strokestyle, fillstylearray, captype) { circle.call(this, radius, linewidth, strokestyle, fillstylearray, captype);}ring.prototype = object.create(circle.prototype);ring.prototype.drawring = function (ctx, startangle, percentarray ,criclex,cricley) { startangle = startangle || 3 * math.pi / 2; percentarray = percentarray || []; this.draw(ctx,criclex,cricley); // 调用circle的draw方法画圈圈 var _this = this; // angle percentarray.foreach(function (item, index) { ctx.beginpath(); var anglepersec = 2 * math.pi / (100 / item); // 蓝色的弧度 ctx.arc(criclex, cricley, _this.radius, startangle, startangle + anglepersec, false); //这里的圆心坐标要和cirle的保持一致 startangle = startangle + anglepersec; ctx.strokestyle = _this.fillstyle[index]; ctx.linecap = _this.linecap; ctx.stroke(); ctx.closepath(); }) //小圆圈覆盖 ctx.beginpath(); ctx.arc(criclex, cricley, _this.radius, startangle, startangle, false); //这里的圆心坐标要和cirle的保持一致 ctx.strokestyle = _this.fillstyle[0]; ctx.linecap = _this.linecap; ctx.stroke(); ctx.closepath();}
相信看了这些案例你已经掌握了方法，更多精彩请关注其它相关文章！
相关阅读：
css的编码怎么转换
css3怎么制作蝴蝶飞舞的动画
css3怎么实现图片封面展示的动画
以上就是怎么绘制圆角环形图形的详细内容。