Ausführliche Erläuterung der Beispielmethode zur Realisierung von Bogen- und Ring-Fortschrittsbalken auf Leinwand

Das Folgende ist eine Zusammenfassung, wie ich den kreisförmigen Fortschrittsbalkeneffekt in meinem Projekt erzielen kann. Ich hoffe, dass es für alle hilfreich sein wird:

Diese Methode zeichnet einen Kreis durch LeinwandUm den dynamischen Ring-Fortschrittsbalken in Kreisform zu implementieren, geben Sie den Code direkt ein. Wenn Sie Fragen haben, lesen Sie bitte die Kommentare:

Erstellen Sie einfach eine Leinwand auf der Seite:

<canvas id="canvas" width="300" height="300">
    <p>抱歉，您的浏览器不支持canvas</p>
 </canvas>

JS ist in zwei Teile unterteilt
Der erste Teil implementiert die Gesamtfunktion:
Der erste Teil:
Das Funktionsprinzip des ersten Teils besteht grob darin, zwei Kreise zu zeichnen, einer ist Die Hintergrundfarbe ist ein Kreis, der zweite ist ein dynamisch geladener Bogen, der Fortschritt wird durch Timer geladen; die Farbe wird mit einer Verlaufsfarbe hinzugefügt;

 function toCanvas(id ,progress){                canvas进度条
                var canvas = document.getElementById(id),
                ctx = canvas.getContext("2d"),
                percent = progress,  最终百分比                circleX = canvas.width / 2,  中心x坐标                circleY = canvas.height / 2,  中心y坐标                radius = 100, 圆环半径                lineWidth = 5,  圆形线条的宽度                fontSize = 20; 字体大小
                 两端圆点
                function smallcircle1(cx, cy, r) {
                    ctx.beginPath();                    //ctx.moveTo(cx + r, cy);                    ctx.lineWidth = 1;
                    ctx.fillStyle = '#06a8f3';
                    ctx.arc(cx, cy, r,0,Math.PI*2);
                    ctx.fill();
                }                 function smallcircle2(cx, cy, r) {
                     ctx.beginPath();                     //ctx.moveTo(cx + r, cy);                     ctx.lineWidth = 1;
                     ctx.fillStyle = '#00f8bb';
                     ctx.arc(cx, cy, r,0,Math.PI*2);
                     ctx.fill();
                 }                 画圆
                 function circle(cx, cy, r) {
                     ctx.beginPath();                     //ctx.moveTo(cx + r, cy);                     ctx.lineWidth = lineWidth;
                     ctx.strokeStyle = '#eee';
                     ctx.arc(cx, cy, r, Math.PI*2/3, Math.PI * 1/3);
                     ctx.stroke();
                 }                 画弧线
                 function sector(cx, cy, r, startAngle, endAngle, anti) {
                     ctx.beginPath();                     //ctx.moveTo(cx, cy + r); // 从圆形底部开始画                     ctx.lineWidth = lineWidth;                     // 渐变色 - 可自定义
                     var linGrad = ctx.createLinearGradient(
                         circleX-radius-lineWidth, circleY, circleX+radius+lineWidth, circleY
                     );
                     linGrad.addColorStop(0.0, '#06a8f3');                     //linGrad.addColorStop(0.5, '#9bc4eb');                     linGrad.addColorStop(1.0, '#00f8bb');
                     ctx.strokeStyle = linGrad;                      圆弧两端的样式                     ctx.lineCap = 'round';                     圆弧                     ctx.arc(
                         cx, cy, r,
                         (Math.PI*2/3),                         (Math.PI*2/3) + endAngle/100 * (Math.PI*5/3),
                         false
                     );
                     ctx.stroke();
                 }                  刷新
                 function loading() {                     if (process >= percent) {
                         clearInterval(circleLoading);
                     }                      清除canvas内容                     ctx.clearRect(0, 0, circleX * 2, circleY * 2);                    中间的字                     ctx.font = fontSize + 'px April';
                     ctx.textAlign = 'center';
                     ctx.textBaseline = 'middle';
                     ctx.fillStyle = '#999';
                     ctx.fillText(parseFloat(process).toFixed(0) + '%', circleX, circleY);    
                  
                     圆形                     circle(circleX, circleY, radius);                     
                      圆弧                     sector(circleX, circleY, radius, Math.PI*2/3, process);
                     两端圆点                     smallcircle1(150+Math.cos(2*Math.PI/360*120)*100, 150+Math.sin(2*Math.PI/360*120)*100, 5);
                     smallcircle2(150+Math.cos(2*Math.PI/360*(120+process*3))*100, 150+Math.sin(2*Math.PI/360*(120+process*3))*100, 5);                     控制结束时动画的速度
                     if (process / percent > 0.90) {
                         process += 0.30;
                     } else if (process / percent > 0.80) {
                         process += 0.55;
                     } else if (process / percent > 0.70) {
                         process += 0.75;
                     } else {
                         process += 1.0;
                     }
                 }                 var process = 0.0;  进度
                 var circleLoading = window.setInterval(function () {
                     loading();
                 }, 20);
                     
            }
第二部分，调用封装好的代码：
            toCanvas('canvas',50);

[Verwandte Empfehlungen]

1. Canvas implementiert einen kreisförmigen Fortschrittsbalken und zeigt einen numerischen Prozentsatz an

2. Verwenden Sie einen CSS-Clip, um ein Beispiel für ein kreisförmiges Fortschrittsbalken-Tutorial für die Audiowiedergabe zu implementieren

3. Teilen Sie den Beispielcode des h5-Canvas-Kreis-Fortschrittsbalkens

4. H5-Canvas-Implementierungsbeispiel für den kreisförmigen dynamischen Ladefortschritt

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Beispielmethode zur Realisierung von Bogen- und Ring-Fortschrittsbalken auf Leinwand. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!