現在有很多的 loading 組件 什么js 等等 閑來沒事就寫一個 H5的 loading
有很多的Loading 是一張張圖片 js 控制的
有了 canvas的 出現 你就可以體驗不同之處了
自己效仿前人的做法去看兩種的效率 和占用的資源 chrome=>更多工具=>資源管理器
Canvas : 初期比圖片占用大一點，能接受， 后面會降下來， 而且一直穩定。
圖片+js: 初期效果滿意 越到后面 資源占用越多 。
<只是畫圓 如果你想要圖片，后文會給介紹>
我們都知道 HTML 5里面的 canvas 是一個矩形 你可以做的事情有很多 只要在這個矩形里面就行 。
原理： 在一個canvas 里面循環的去畫弧 要想圓弧連貫就要控制每一次擦除和繪制的間隔 ；
你要是做圖片的話 就想想什么幀 PAL控制線之類的 一秒運動多少像素比較好 連貫… …
需要用到的東西有：
setInterval()
canvas
ajax（這東西提示一個思路就行了）
上圖：
這就是要繪制的布置，然后現在可以做點事情了。
由於是簡單示例 就不做的太華麗了，還是上代碼吧。
<div style=" padding-left: 600px;" id=‘loading_panl’> <lable id="lbl_Info"></lable> <canvas id="test" width=200 height=200></canvas> </div>
畢竟手機啊 什么的都是在頁面的中間去顯示loading 然后加載出來需要的素材
畫布有了 我們就該開始繪畫了
1 <script> 2 var deg = 0; //全局變量 用來存放 canvas 繪制的角度 3 var test = function(deg,test){ //角度、 canvasid 4 5 //獲取畫布 對象 6 var canvas2d = document.getElementById("test").getContext("2d"); 7 //canvas繪制圓形進度 8 var r = deg*Math.PI/180; 9 //繪制文字 filltext( text，x,y) 10 canvas2d.fillText("正在玩命加載中. . . . ",65,140); 11 //填充顏色 12 canvas2d.fillStyle = "#B2DFF5"; 13 //由於想讓圓形動起來 就要一直擦除 重繪 14 // 區域自己控制一下 15 //手機需要在有限的屏幕中做很多事情 還是精確到像素吧（有殘留的一點點沒清掉 請將像素加上 0.5） 16 canvas2d.clearRect(0,0,200,122); 17 //開始繪制 18 canvas2d.beginPath(); 19 //canvas的外圓顏色 20 canvas2d.strokeStyle = "#84F2ED"; 21 //圓外框的寬度 別太寬 有點惡心 22 canvas2d.lineWidth = 2.5; 23 //canvas繪制弧形 24 canvas2d.arc(100,100,20,0-90*Math.PI/180,r-90*Math.PI/180,false); 25 canvas2d.fill(); 26 canvas2d.stroke(); 27 canvas2d.closePath(); 28 }; 29 //使用定時器讓html5 canvas繪制圓形進度動起來 30 //此時你可以使用 ajax 來做請求了 31 Example: 32 $.ajax({ 33 url:"", 34 data:{}, 35 success(data) 36 { 37 // clearInterval(t); 38 //隱藏之前那個DIV咯 39 }, 40 error: 41 { 42 // 提示頁面那個lable 提示加載失敗的原因 <要分手的時候 理由即使牽強都沒辦法> 43 } 44 45 }) 46 47 var t = setInterval(function(){ 48 //循環給 圓弧加角度 49 //如果你需要快就加的多一點吧 50 deg+=2; 51 //調用繪制方法 52 test(deg); 53 //轉一圈還是N圈就看你的喜好了。 54 if(deg>=365){ 55 56 deg=0; 57 } 58 },20); 59 </script>
現在 就來說說圖片的 laoding 怎么做吧：
從圖中 可以選擇兩種方式
如果你是選擇 上下動 那就是選擇 黃色區域框
這時候 你就要 設置一個最高點 和一個最低點 用來做圖片的上下波動 的區域
如果你是選擇 左右動 那就是選擇 藍色區域框
這時候 你就要 設置一個最左點 和一個最右點 用來做圖片的左右滑動的零界點
圖片的 運動 就是 每間隔 多少毫秒清除 重繪 (電影最基礎是一秒24幀 那就用個25幀吧)
幀 也就是你一次運動的距離
同上咯 你可以當你在點擊 search 的時候去觸發 你的loading 方法
原理說清楚了 按理說的確是應該上代碼的 ，關於圖片的此效果 這時候就用一張效果圖來告訴你們吧。
每個人的審美都不一樣 我自己覺得這效果 我看不下去 ，希望你能玩出更多的花樣