Heim > Web-Frontend > H5-Tutorial > H5 Canvas erstellt einen kreisförmigen Fortschrittsbalken und zeigt einen numerischen Prozentsatz an

H5 Canvas erstellt einen kreisförmigen Fortschrittsbalken und zeigt einen numerischen Prozentsatz an

php中世界最好的语言
Freigeben: 2018-03-27 09:52:49
Original
3631 Leute haben es durchsucht

Dieses Mal bringe ich Ihnen die H5-Leinwand, um einen kreisförmigen Fortschrittsbalken zu erstellen und den numerischen Prozentsatz anzuzeigen. Die Leinwand, um den kreisförmigen Fortschrittsbalken zu erstellen und den numerischen Prozentsatz anzuzeigen Notizen Es gibt Welche, die folgenden sind praktische Fälle, werfen wir einen Blick darauf.

In diesem Artikel wird ein Beispiel dafür vorgestellt, wie HTML5 Canvas einen kreisförmigen Fortschrittsbalken implementiert und einen numerischen Prozenteffekt wie folgt anzeigt:

Implementierung des Effekts

1. Erstellen Sie zunächst einen HTML-Code

<canvas id="canvas" width="500" height="500" style="background:#000;"></canvas>
Nach dem Login kopieren

2.Erstellen Sie eine LeinwandUmgebung

var canvas = document.getElementById('canvas'),  //获取canvas元素
            context = canvas.getContext('2d'),  //获取画图环境,指明为2d
            centerX = canvas.width/2,   //Canvas中心点x轴坐标
            centerY = canvas.height/2,  //Canvas中心点y轴坐标
            rad = Math.PI*2/100, //将360度分成100份,那么每一份就是rad度
            speed = 0.1; //加载的快慢就靠它了
Nach dem Login kopieren

3. Zeichnen Sie einen 5 Pixel breiten äußeren Bewegungskreis

//绘制5像素宽的运动外圈
        function blueCircle(n){
            context.save();
            context.strokeStyle = "#fff"; //设置描边样式
            context.lineWidth = 5; //设置线宽
            context.beginPath(); //路径开始
            context.arc(centerX, centerY, 100 , -Math.PI/2, -Math.PI/2 +n*rad, false); //用于绘制圆弧context.arc(x坐标,y坐标,半径,起始角度,终止角度,顺时针/逆时针)
            context.stroke(); //绘制
            context.closePath(); //路径结束
            context.restore();
        }
Nach dem Login kopieren

4. Zeichnen Sie den weißen äußeren Kreis

//绘制白色外圈
        function whiteCircle(){
            context.save();
            context.beginPath();
            context.lineWidth = 2; //设置线宽
            context.strokeStyle = "red";
            context.arc(centerX, centerY, 100 , 0, Math.PI*2, false);
            context.stroke();
            context.closePath();
            context.restore();
        }
Nach dem Login kopieren

5. Zeichnen Sie den Prozenttext

function text(n){
            context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
            context.strokeStyle = "#fff"; //设置描边样式
            context.font = "40px Arial"; //设置字体大小和字体
            //绘制字体,并且指定位置
            context.strokeText(n.toFixed(0)+"%", centerX-25, centerY+10);
            context.stroke(); //执行绘制
            context.restore();
        }
Nach dem Login kopieren

6. Bewegen Sie ihn

//动画循环
        (function drawFrame(){
            window.requestAnimationFrame(drawFrame);
            context.clearRect(0, 0, canvas.width, canvas.height);
            whiteCircle();
            text(speed);
            blueCircle(speed);
            if(speed > 100) speed = 0;
            speed += 0.1;
        }());
Nach dem Login kopieren

Vollständiger Code





HTML5 Canvas 圆形进度条并显示数字百分比



<canvas id="canvas" width="500" height="500" style="background:#000;"></canvas>
<script>
    window.onload = function(){
        var canvas = document.getElementById('canvas'),  //获取canvas元素
            context = canvas.getContext('2d'),  //获取画图环境,指明为2d
            centerX = canvas.width/2,   //Canvas中心点x轴坐标
            centerY = canvas.height/2,  //Canvas中心点y轴坐标
            rad = Math.PI*2/100, //将360度分成100份,那么每一份就是rad度
            speed = 0.1; //加载的快慢就靠它了 
            
        //绘制5像素宽的运动外圈
        function blueCircle(n){
            context.save();
            context.strokeStyle = &quot;#fff&quot;; //设置描边样式
            context.lineWidth = 5; //设置线宽
            context.beginPath(); //路径开始
            context.arc(centerX, centerY, 100 , -Math.PI/2, -Math.PI/2 +n*rad, false); //用于绘制圆弧context.arc(x坐标,y坐标,半径,起始角度,终止角度,顺时针/逆时针)
            context.stroke(); //绘制
            context.closePath(); //路径结束
            context.restore();
        }
        //绘制白色外圈
        function whiteCircle(){
            context.save();
            context.beginPath();
            context.lineWidth = 2; //设置线宽
            context.strokeStyle = &quot;red&quot;;
            context.arc(centerX, centerY, 100 , 0, Math.PI*2, false);
            context.stroke();
            context.closePath();
            context.restore();
        }  
        //百分比文字绘制
        function text(n){
            context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
            context.strokeStyle = &quot;#fff&quot;; //设置描边样式
            context.font = &quot;40px Arial&quot;; //设置字体大小和字体
            //绘制字体,并且指定位置
            context.strokeText(n.toFixed(0)+&quot;%&quot;, centerX-25, centerY+10);
            context.stroke(); //执行绘制
            context.restore();
        } 
        //动画循环
        (function drawFrame(){
            window.requestAnimationFrame(drawFrame);
            context.clearRect(0, 0, canvas.width, canvas.height);
            whiteCircle();
            text(speed);
            blueCircle(speed);
            if(speed &gt; 100) speed = 0;
            speed += 0.1;
        }());
    }
</script>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Canvas implementiert die Zeichnung rotierender Windmühlen

Interaktion zwischen data-* und js

Das obige ist der detaillierte Inhalt vonH5 Canvas erstellt einen kreisförmigen Fortschrittsbalken und zeigt einen numerischen Prozentsatz an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage