H5canvas圓形動(dòng)態(tài)加載進(jìn)度怎么弄-創(chuàng)新互聯(lián)

這篇文章主要介紹了H5 canvas圓形動(dòng)態(tài)加載進(jìn)度怎么弄，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

為鹿寨等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及鹿寨網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)、鹿寨網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

具體效果如下：

本人的想法有兩種，但是利用canvas無(wú)疑是最方便的解決辦法，在此以canvas實(shí)現(xiàn)為例子，具體實(shí)現(xiàn)步驟如下：

1.建立前臺(tái)顯示的canvas容器，代碼如下：

<span style="font-family:Courier New;font-size:18px;"><!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>H5 canvas制作圓形動(dòng)態(tài)加載進(jìn)度實(shí)例</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.獲取canvas容器，建立繪畫(huà)對(duì)象，代碼如下：

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

3.繪制初始灰色圓圈，圓圈實(shí)際上是由兩個(gè)同心圓形疊加形成的，代碼如下：

<span style="font-family:Courier New;">context.beginPath();//開(kāi)始路徑
context.arc(150,150,150,0,2*Math.PI);//繪制外圈圓
context.fillStyle='#ccc';//設(shè)置外圈圓填充顏色
context.fill();//填充顏色
context.beginPath();//開(kāi)始路徑
context.arc(150,150,130,0,2*Math.PI);//繪制內(nèi)圈圓
context.fillStyle='#fff';//設(shè)置內(nèi)圈圓填充顏色（最好是和背景色相同）
context.fill();//填充顏色</span>

4.加入進(jìn)度百分比，代碼如下：

<span style="font-family:Courier New;">context.fillStyle='#ccc';//設(shè)置字體顏色（同樣為灰色）
context.font="110px 微軟雅黑 ";//設(shè)置填充文本的大小和字體（順序不可改變）</span>

5.根據(jù)進(jìn)度值修改繪畫(huà)空間大小，代碼如下：

<span style="font-family:Courier New;">context.beginPath();//開(kāi)始路徑（這是指繪制空間的路徑）
context.rect(0,300*(1-temp),300,300*temp);//根據(jù)進(jìn)度值改變繪制空間大小
context.clip();//根據(jù)路徑剪切得到新的繪制空間</span>

6.在新的繪制空間繪制進(jìn)度圓環(huán)和進(jìn)度百分比，代碼和之前的幾乎一樣，只需修改填充顏色，代碼如下：

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

到此已經(jīng)完成了靜態(tài)的圓形進(jìn)度效果，接下來(lái)就是利用定時(shí)器修改當(dāng)前進(jìn)度值反復(fù)繪制即可，但是需要注意的是在外圈圓環(huán)和進(jìn)度百分比添加完后，需要用

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

來(lái)保存當(dāng)前回話空間，在所有繪畫(huà)完成后再利用

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

來(lái)還原最初的繪畫(huà)空間，因?yàn)樾薷睦L畫(huà)空間都是在當(dāng)前繪畫(huà)空間下進(jìn)行剪切得到的，所以每完成一次所有繪畫(huà)都需要還原到初始的繪畫(huà)空間，下面是完整的js代碼：

<span style="font-family:Courier New;">window.onload=function(){
	var loading=document.getElementById('loading');
	var context=loading.getContext('2d');
	var num=parseInt(Math.random()*100)/100;//模擬獲取進(jìn)度值
	var temp=0;//當(dāng)前進(jìn)度值
	var time=1000;//動(dòng)畫(huà)總時(shí)長(zhǎng)
	var step=1000*0.01/num;//動(dòng)畫(huà)步長(zhǎng)
	function loadanimate(){
		context.beginPath();
		context.arc(150,150,150,0,2*Math.PI);
		context.fillStyle='#ccc';
		context.fill();
		context.beginPath();
		context.arc(150,150,130,0,2*Math.PI);
		context.fillStyle='#fff';
		context.fill();
		context.fillStyle='#ccc';
		context.font="110px 微軟雅黑 ";
		if(temp>0.09){//調(diào)整文本居中
			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='aquamarine';
		context.fill();
		context.beginPath();
		context.arc(150,150,130,0,2*Math.PI);
		context.fillStyle='#fff';
		context.fill();
		context.fillStyle='aquamarine';
		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>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享H5 canvas圓形動(dòng)態(tài)加載進(jìn)度怎么弄內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)建站，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

網(wǎng)頁(yè)名稱：H5canvas圓形動(dòng)態(tài)加載進(jìn)度怎么弄-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://aaarwkj.com/article4/pgsoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、用戶體驗(yàn)、App設(shè)計(jì)、App開(kāi)發(fā)、做網(wǎng)站、虛擬主機(jī)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

H5canvas圓形動(dòng)態(tài)加載進(jìn)度怎么弄-創(chuàng)新互聯(lián)