H5帆布圆形动态加载进度怎么弄

这篇文章主要介绍了H5帆布圆形动态加载进度怎么弄,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

具体效果如下:

　　& lt;脚本src=https://www.yisu.com/zixun/" js/index.js " type=" text/javascript " charset=" utf - 8 "> 　　头 　　<身体> 　　<帆布id="加载"宽度=" 300 "高度=" 300 "> 　　 　　

<强> 2。获取帆布容器,建立绘画对象,代码如下:

& lt;跨风格=白痔謇嘈?快递新;字体大小:18 px;“在var加载=. getelementbyid(& # 39;加载# 39;); 　　var=loading.getContext上下文(& # 39;2 d # 39;); & lt;/span>

& lt;跨风格=白痔謇嘈?快递新;“祝辞context.beginPath();//开始路径 　　context.arc (150150150 0 2 * Math.PI);//绘制外圈圆 　　context.fillStyle=& # 39; # ccc # 39;;//设置外圈圆填充颜色 　　context.fill();//填充颜色 　　context.beginPath();//开始路径 　　context.arc (150150130 0 2 * Math.PI);//绘制内圈圆 　　context.fillStyle=& # 39; # fff& # 39;;//设置内圈圆填充颜色(最好是和背景色相同) 　　context.fill();//填充颜色& lt;/span>

& lt;跨风格=白痔謇嘈?快递新;“祝辞context.fillStyle=& # 39; # ccc # 39;;//设置字体颜色(同样为灰色) 　　context.font=?10 px微软雅黑“;//设置填充文本的大小和字体(顺序不可改变)& lt;/span>

<强>

& lt;跨风格=白痔謇嘈?快递新;“祝辞context.beginPath();//开始路径(这是指绘制空间的路径) 　　context.rect (0300 * (1-temp) 300300 *临时);//根据进度值改变绘制空间大小 　　context.clip();//根据路径剪切得到新的绘制空间& lt;/span>

<强> 6。在新的绘制空间绘制进度圆环和进度百分比,代码和之前的几乎一样,只需修改填充颜色,代码如下:

& lt;跨风格=白痔謇嘈?快递新;“祝辞context.beginPath (); 　　context.arc (150150150 0 2 * Math.PI); 　　context.fillStyle=& # 39;海蓝宝石# 39;;//设置新的填充颜色 　　context.fill (); 　　context.beginPath (); 　　context.arc (150150130 0 2 * Math.PI); 　　context.fillStyle=& # 39; # fff& # 39;; 　　context.fill (); 　　context.fillStyle=& # 39;海蓝宝石# 39;;//设置新的填充颜色 　　context.font=?10 px微软雅黑“;& lt;/span>

<强>到此已经完成了静态的圆形进度效果,接下来就是利用定时器修改当前进度值反复绘制即可,但是需要注意的是在外圈圆环和进度百分比添加完后,需要用

& lt;跨风格=白痔謇嘈?快递新;“祝辞context.save (); & lt;/span>

<强>来保存当前回话空间,在所有绘画完成后再利用

& lt;跨风格=白痔謇嘈?快递新;“祝辞context.restore (); & lt;/span>

<强>来还原最初的绘画空间,因为修改绘画空间都是在当前绘画空间下进行剪切得到的,所以每完成一次所有绘画都需要还原到初始的绘画空间,下面是完整的js代码:

& lt;跨风格=白痔謇嘈?快递新;“在window=function () { 　　加载var=. getelementbyid(& # 39;加载# 39;); 　　var=loading.getContext上下文(& # 39;2 d # 39;); 　　var num=方法(math . random() * 100)/100;//模拟获取进度值 　　var temp=0;//当前进度值 　　var=1000;//动画总时长 　　var=1000 * 0.01步/num;//动画步长 　　函数loadanimate () { 　　context.beginPath (); 　　context.arc (150150150 0 2 * Math.PI); 　　context.fillStyle=& # 39; # ccc # 39;; 　　context.fill (); 　　context.beginPath (); 　　context.arc (150150130 0 2 * Math.PI); 　　context.fillStyle=& # 39; # fff& # 39;; 　　context.fill (); 　　context.fillStyle=& # 39; # ccc # 39;; 　　context.font=?10 px微软雅黑“; 　　如果(temp> 0.09){//调整文本居中 　　context.fillText(方法(临时* 100)+“%”,45188年); 　　其他}{ 　　context.fillText (“;“+方法(临时* 100)+“%”,45188); 　　} 　　context.save (); 　　 　　context.beginPath (); 　　context.rect (0300 * (1-temp) 300300 *临时); 　　context.clip (); 　　 　　context.beginPath (); 　　context.arc (150150150 0 2 * Math.PI); 　　context.fillStyle=& # 39;海蓝宝石# 39;; 　　context.fill (); 　　context.beginPath (); 　　context.arc (150150130 0 2 * Math.PI); 　　context.fillStyle=& # 39; # fff& # 39;; 　　context.fill (); 　　context.fillStyle=& # 39;海蓝宝石# 39;; 　　context.font=?10 px微软雅黑“; 　　如果(temp> 0.09) { 　　context.fillText(方法(临时* 100)+“%”,45188年); 　　其他}{ 　　context.fillText (“;“+方法(临时* 100)+“%”,45188); 　　} 　　context.restore (); 　　setTimeout(函数(){ 　　如果(num>临时){ 　　临时+=0.01; 　　loadanimate (); 　　} 　　},步骤); 　　} 　　loadanimate (); 　　}; 　　& lt;/span>

H5帆布圆形动态加载进度怎么弄