둥근 원형 모양을 그리는 방법

선택할 수 있는 다양한 진행률 표시줄 중에서 모든 사람이 링 차트를 선택합니다. 그래서 오늘은 캔버스를 사용하여 둥근 링 차트를 그리는 방법과 흐릿한 진행률 표시줄에 대한 해결 방법을 알려 드리겠습니다.

* @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();}

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

CSS 코딩을 변환하는 방법

CSS3에서 날아다니는 나비의 애니메이션을 만드는 방법

CSS3에서 그림 표지 표시에 애니메이션을 적용하는 방법

위 내용은 둥근 원형 모양을 그리는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!