Heim > Artikel > Web-Frontend > H5 Canvas implementiert ein Beispiel für den kreisförmigen dynamischen Ladefortschritt

H5 Canvas implementiert ein Beispiel für den kreisförmigen dynamischen Ladefortschritt

零下一度Original: 2017-05-27 15:19:162548Durchsuche

Als ich kürzlich Fragen und Antworten durchstöberte, stieß ich auf jemanden, der fragte, wie man eine dynamische kreisförmige Fortschrittsfunktion erstellt. Der spezifische Effekt ist wie folgt:

Ich habe zwei Ideen, aber die Verwendung von Canvas ist zweifellos die bequemste Lösung. Hier nehmen wir die Canvas-Implementierung als Beispiel für die Implementierung Im Detail sind die Schritte wie folgt:

1. Erstellen Sie einen im Vordergrund angezeigten Canvas-Container. Der Code lautet wie folgt:

<span style="font-family:Courier New;font-size:18px;"><!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>H5 canvas制作圆形动态加载进度实例</title>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<canvas id="loading" width="300" height="300"></canvas>
	</body>
</html></span>

2. Holen Sie sich den Leinwandbehälter und erstellen Sie ein Malobjekt. Der Code lautet wie folgt:

<span style="font-family:Courier New;font-size:18px;">var loading=document.getElementById(&#39;loading&#39;);
var context=loading.getContext(&#39;2d&#39;);</span>

3 . Zeichnen Sie einen anfänglichen grauen Kreis, der aus zwei konzentrischen Kreisen besteht. Der Code lautet wie folgt:

<span style="font-family:Courier New;">context.beginPath();//开始路径
context.arc(150,150,150,0,2*Math.PI);//绘制外圈圆
context.fillStyle=&#39;#ccc&#39;;//设置外圈圆填充颜色
context.fill();//填充颜色
context.beginPath();//开始路径
context.arc(150,150,130,0,2*Math.PI);//绘制内圈圆
context.fillStyle=&#39;#fff&#39;;//设置内圈圆填充颜色（最好是和背景色相同）
context.fill();//填充颜色</span>

Fortschrittsprozentsatz, der Code lautet wie folgt:

<span style="font-family:Courier New;">context.fillStyle=&#39;#ccc&#39;;//设置字体颜色（同样为灰色）
context.font="110px 微软雅黑 ";//设置填充文本的大小和字体（顺序不可改变）</span>

5. Ändern Sie die Zeichenraumgröße entsprechend dem Fortschrittswert. Der Code lautet wie folgt:

<span style="font-family:Courier New;">context.beginPath();//开始路径（这是指绘制空间的路径）
context.rect(0,300*(1-temp),300,300*temp);//根据进度值改变绘制空间大小
context.clip();//根据路径剪切得到新的绘制空间</span>

6. Zeichnen Sie einen Fortschrittsring in den neuen Zeichenbereich. Was den Fortschrittsprozentsatz betrifft, ist der Code fast derselbe wie zuvor. Ändern Sie einfach die Füllfarbe. Der Code lautet wie folgt:

<span style="font-family:Courier New;">context.beginPath();
context.arc(150,150,150,0,2*Math.PI);
context.fillStyle=&#39;aquamarine&#39;;//设置新的填充颜色
context.fill();
context.beginPath();
context.arc(150,150,130,0,2*Math.PI);
context.fillStyle=&#39;#fff&#39;;
context.fill();
context.fillStyle=&#39;aquamarine&#39;;//设置新的填充颜色
context.font="110px 微软雅黑 ";</span>

Zu diesem Zeitpunkt ist der statische kreisförmige Fortschrittseffekt abgeschlossen. Der nächste Schritt besteht darin, den aktuellen Fortschritt mithilfe des Timers zu ändern Wert und zeichnen Sie ihn wiederholt. Beachten Sie jedoch, dass Sie nach dem Hinzufügen des äußeren Rings und des Fortschrittsprozentsatzes

<span style="font-family:Courier New;">context.save();</span>

verwenden müssen, um ihn für den aktuellen Gesprächsbereich zu speichern , verwenden Sie

<span style="font-family:Courier New;">context.restore();</span>

, um den ursprünglichen Malraum wiederherzustellen, nachdem alle Malarbeiten abgeschlossen sind, da der geänderte Malraum durch Ausschneiden unter dem aktuellen Malraum erhalten wird. Daher müssen alle Gemälde wiederhergestellt werden Jedes Mal wird der vollständige js-Code wiederhergestellt:

<span style="font-family:Courier New;">window.onload=function(){
	var loading=document.getElementById(&#39;loading&#39;);
	var context=loading.getContext(&#39;2d&#39;);
	var num=parseInt(Math.random()*100)/100;//模拟获取进度值
	var temp=0;//当前进度值
	var time=1000;//动画总时长
	var step=1000*0.01/num;//动画步长
	function loadanimate(){
		context.beginPath();
		context.arc(150,150,150,0,2*Math.PI);
		context.fillStyle=&#39;#ccc&#39;;
		context.fill();
		context.beginPath();
		context.arc(150,150,130,0,2*Math.PI);
		context.fillStyle=&#39;#fff&#39;;
		context.fill();
		context.fillStyle=&#39;#ccc&#39;;
		context.font="110px 微软雅黑 ";
		if(temp>0.09){//调整文本居中
			context.fillText(parseInt(temp*100)+"%",45,188);
		}else{
			context.fillText(" "+parseInt(temp*100)+"%",45,188);
		}
		context.save();
		
		context.beginPath();
		context.rect(0,300*(1-temp),300,300*temp);
		context.clip();
		
		context.beginPath();
		context.arc(150,150,150,0,2*Math.PI);
		context.fillStyle=&#39;aquamarine&#39;;
		context.fill();
		context.beginPath();
		context.arc(150,150,130,0,2*Math.PI);
		context.fillStyle=&#39;#fff&#39;;
		context.fill();
		context.fillStyle=&#39;aquamarine&#39;;
		context.font="110px 微软雅黑 ";
		if(temp>0.09){
			context.fillText(parseInt(temp*100)+"%",45,188);
		}else{
			context.fillText(" "+parseInt(temp*100)+"%",45,188);
		}
		context.restore();
		setTimeout(function(){
			if(num>temp){
				temp+=0.01;
				loadanimate();
			}
		},step);
	}
loadanimate();
};
</span>

Verwandt Empfehlungen】

1. Teilen Sie den Beispielcode des H5-Canvas-Kreis-Fortschrittsbalkens

2. HTML5-Canvas implementiert den Beispielcode der Kreisuhr

3. Zusammenfassung der Tags in HTML5

Das obige ist der detaillierte Inhalt vonH5 Canvas implementiert ein Beispiel für den kreisförmigen dynamischen Ladefortschritt. 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：Canvas implementiert einen LupeneffektNächster Artikel：Canvas implementiert einen Lupeneffekt

In Verbindung stehende Artikel

Mehr sehen