canvas作為H5中重要的新增特性，使開發者可以用它來創作各種令人驚嘆的作品。先來看一下瀏覽器對canvas的支持情況。
<canvas> 標簽定義圖形，比如圖表和其他圖像，我們使用腳本來繪制圖形。
先看一下這次動畫的結果： 
gif圖可能不完整，可以點擊這里查看完整效果。
canvas的API較多，這里我們只介紹一下本次使用到的一下API，更多的canvas可以查看這里。
beginPath() //重置或者開始當前路徑 strokeStyle //設置筆觸的顏色，即畫出來的顏色 arc(x,y,r,sangle,eangle,boolean) //畫一個圓弧，參數分別是：圓心的x，y軸、半徑、起始點和結束點、逆時針還是順時針 stroke() //繪制定義好的路徑 font //設置字體的屬性 lineWidth //繪制路徑時線的寬度 strokeText(text,x,y) //繪制字體,參數分別是：要繪制的字、起始點的x、y坐標 clearRect(x,y,width,height) //清除矩形內所有的路徑，參數分別是：矩形起點的x、y坐標、矩形的寬、高 save() //保存當前環境的狀態 restore() //返回之前保存過的路徑狀態和屬性
下面我們來分析一下這個動畫的組成，這個動畫是由三部分組成的，分別是：外層的比較細的圓、比較粗的圓、內層的百分比數字。只要知道了它是由什么構成的，那么我們就可以一一畫出它的樣式了。
在畫圖之前我們需要先定義一些可能需要的變量，如畫圖的起點、圓心、半徑之類的，如下：
var canvas = document.getElementById("canvas"), //獲取canvas context = canvas.getContext("2d"), //獲取2d上下文 cirX = canvas.width/ 2, //canvas x軸的中點 cirY = canvas.height/ 2, //canvas y軸的中點 rad = Math.PI * 2 / 100, //360度的百分之一 n = 1, //從百分之n開始計算 speed = 150, //速度 r = 100; //半徑
首先我們來畫一下外層比較細的圓，因為這個最簡單，沒有動畫，只需要使用arc()函數來繪制就可以了，下面是繪制外圈的函數：
//繪制最外層細圈 function writeCircle(){ context.save(); //save和restore可以保證樣式屬性只運用於該段canvas元素 context.beginPath(); //開始路徑 context.strokeStyle = "#49f"; //設置邊線的顏色 context.arc(cirX, cirY, r, 0, Math.PI * 2, false); //畫一個圓的路徑 context.stroke(); //繪制邊線 context.restore(); }
接下來我們繪制內層的百分比數，需要用到font設置字體屬性，strokeText()繪制數字，因為數字是動的，所以需要傳入一個參數n來代表百分比的數字，為了防止傳入的是小數，可以通過toFixed()設置小數點后有0位數，即沒有小數，下面是函數：
//繪制文本
function writeText(n){
context.save(); context.strokeStyle = "#49f"; context.font = "40px Arial"; context.strokeText(n.toFixed(0)+"%",cirX - 30 ,cirY +10); context.stroke(); context.restore(); }
最后繪制外層粗線圓，這里通過lineWidth屬性將邊線設置比原始的粗即可，然后傳入參數n，因為這個是按角度畫的，所以n要乘以我們最上面定義的rad，即100%為360度，另外還要注意的是圓的起始點，arc()繪制圓的時候起始點是最右側的點，而我們的起點需要是圓最上方的，所以起始角度應該為 -Math.PI/2，函數如下：
//繪制藍色外圈 function writeBlue(n){ context.save(); context.strokeStyle = "#49f"; //設置邊線顏色 context.lineWidth = 4; //設置邊線寬度 context.beginPath(); context.arc(cirX, cirY, r, -Math.PI/2,-Math.PI/2+ rad*n, false); //畫圓 context.stroke(); context.restore(); }
通過上面三個函數，再加上動畫，一個動態加載的百分比進度圈就完成了，下面是全部代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas加載動畫</title> <style> body{ background: #000; } </style> </head> <body> <canvas id="canvas" width="500" height="500" style="background: #000;"> 您的瀏覽器不支持canvas </canvas> <script> window.onload = function(){ var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"), cirX = canvas.width/ 2, cirY = canvas.height/ 2, rad = Math.PI * 2 / 100, n = 1, speed = 150, r = 100; //繪制最外層細圈 function writeCircle(){ context.save(); //save和restore可以保證樣式屬性只運用於該段canvas元素 context.beginPath(); //開始路徑 context.strokeStyle = "#49f"; //設置邊線的顏色 context.arc(cirX, cirY, r, 0, Math.PI * 2, false); //畫一個圓的路徑 context.stroke(); //繪制邊線 context.restore(); } //繪制文本 function writeText(n){ context.save(); context.strokeStyle = "#49f"; context.font = "40px Arial"; context.strokeText(n.toFixed(0)+"%",cirX - 30 ,cirY +10); context.stroke(); context.restore(); } //繪制藍色外圈 function writeBlue(n){ context.save(); context.strokeStyle = "#49f"; context.lineWidth = 4; context.beginPath(); context.arc(cirX, cirY, r, -Math.PI/2,-Math.PI/2+ rad*n, false); context.stroke(); context.restore(); } function DreamLoading(){ //清除所有，重新繪制 context.clearRect(0,0,canvas.width,canvas.height) writeCircle(); writeText(n); writeBlue(n) if(n < 100){ n= n+0.1; }else { n = 0; } //setTimeout(DreamLoading,speed); requestAnimationFrame(DreamLoading); } DreamLoading(); } </script> </body> </html>