Heim  >  Artikel  >  Web-Frontend  >  So zeichnen Sie eine abgerundete Kreisform

So zeichnen Sie eine abgerundete Kreisform

php中世界最好的语言
php中世界最好的语言Original
2017-11-27 10:33:452305Durchsuche

Unter den vielen Auswahlmöglichkeiten an Fortschrittsbalken-Formen wird sich jeder für die Donut-Form entscheiden. Deshalb werde ich Ihnen heute beibringen, wie Sie mit Leinwand ein abgerundetes Ringdiagramm zeichnen und die Lösung für den unscharfen Fortschrittsbalken finden

* @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

So verwenden Sie

           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%


Quellcode


Der Quellcode ist sehr einfach, jeder ist willkommen verlängere es!

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

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!


Verwandte Lektüre:

So konvertieren Sie die CSS-Kodierung

Wie man mit fliegende Schmetterlinge macht CSS3-Animation

So realisieren Sie eine Animation der Bildcover-Anzeige in CSS3

Das obige ist der detaillierte Inhalt vonSo zeichnen Sie eine abgerundete Kreisform. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:Tipps zur CSS-EntwicklungNächster Artikel:Tipps zur CSS-Entwicklung