H5 canvas implements circular dynamic loading progress example-H5 Tutorial-php.cn

H5 canvas implements circular dynamic loading progress example

零下一度

Release： 2017-05-27 15:19:16

Original

2600 people have browsed it

When I was browsing Q&A recently, I encountered someone asking how to create a dynamic circular progress function. The specific effect is as follows:

I have two ideas, but using canvas is undoubtedly the most convenient solution. Here we take the canvas implementation as an example to implement it specifically. The steps are as follows:

1. Create a canvas container displayed on the front desk, the code is as follows:

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

Copy after login

2. Get the canvas Container, create a painting object, the code is as follows:

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

Copy after login

3. Draw the initial gray circle, the circle is actually formed by the superposition of two concentric circles, the code As follows:

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

Copy after login

4. Add the progress percentage, the code is as follows:

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

Copy after login

5. Modify the drawing space size according to the progress value, the code is as follows:

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

Copy after login

6. Draw the progress ring and progress percentage in the new drawing space. The code is almost the same as before. , just modify the fill color, the code is as follows:

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

Copy after login

The static circular progress effect has been completed. The next step is to use the timer to modify the current progress value and draw it repeatedly. That's it, but it should be noted that after adding the outer ring and progress percentage, you need to use

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

Copy after login

to save the current session space, and then use after all the painting is completed.

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

Copy after login

To restore the original drawing space, because the modified drawing space is obtained by cutting it under the current drawing space, so every time all drawings are completed, they need to be restored to the initial drawing space, as follows Is the complete js code:

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

Copy after login

[Related recommendations]

Share Example code of h5 canvas circle progress bar

html5 canvas implementation of circular clock example code

Summary of tags in HTML5

The above is the detailed content of H5 canvas implements circular dynamic loading progress example. For more information, please follow other related articles on the PHP Chinese website!