如何繪制圓角環(huán)形圖形

* @param {type} radius 圓環(huán)半徑
* @param {type} lineWidth 圓環(huán)寬度
* @param {type} strokeStyle 默認(rèn)背景
* @param {type} fillStyleArray 數(shù)組，圓環(huán)色塊顏色
* @param {type} capType 類型：round是圓角，square正方形頂帽，butt是正常
* @param {type} percentArray ，數(shù)字，每個(gè)占據(jù)的百分比
* @param {type} startAngle 開始的角度
*  @param {type} criclex，cricley 圓心坐標(biāo)，一般是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);//占據(jù)的百分比分別是20%，50%，30%

源代碼

源代碼很簡(jiǎn)單，歡迎大家擴(kuò)展！

 function Circle(radius, lineWidth, strokeStyle, fillStyleArray, capType) {
   this.radius = radius;    // 圓環(huán)半徑
   this.lineWidth = lineWidth;  // 圓環(huán)邊的寬度
   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);  // 坐標(biāo)為90的圓，這里起始角度是0，結(jié)束角度是Math.PI*2
   ctx.lineWidth = this.lineWidth;
   ctx.strokeStyle = this.strokeStyle;
   ctx.stroke();  // 這里用stroke畫一個(gè)空心圓，想填充顏色的童鞋可以用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);  // 調(diào)用Circle的draw方法畫圈圈
   var _this = this;
   // angle
   percentArray.forEach(function (item, index) {
       ctx.beginPath();
       var anglePerSec = 2 * Math.PI / (100 / item); // 藍(lán)色的弧度
       ctx.arc(criclex, cricley, _this.radius, startAngle, startAngle + anglePerSec, false); //這里的圓心坐標(biāo)要和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); //這里的圓心坐標(biāo)要和cirle的保持一致
   ctx.strokeStyle = _this.fillStyle[0];
   ctx.lineCap = _this.lineCap;
   ctx.stroke();
   ctx.closePath();}

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

CSS的編碼怎么轉(zhuǎn)換

CSS3怎么制作蝴蝶飛舞的動(dòng)畫

css3怎么實(shí)現(xiàn)圖片封面展示的動(dòng)畫

以上就是怎么繪制圓角環(huán)形圖形的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！