如題，使用canvas實現如圖效果，該效果用於手機端，也可以用於支援canvas的pc瀏覽器
實現思想：在畫布上畫多重扇圓進行顏色疊加，最後在頂層加上乙個白色並且半徑最小的圓覆蓋，使視覺上形成乙個圓環。
第一層是乙個灰色的全圓
第二層是從12點鐘方向順時針開始畫的紅色扇圓，當角度=360度時整個圓環都是紅色的。
第三層是從12點鐘方向逆時針開始畫的橙色扇圓
當紅色圓角度==橙色圓角度==0度時，圓環是灰色的（最底層的顏色）
當紅色圓角度==360度，橙色圓角度==0度時，圓環是紅色的（第二層顏色）
當紅色圓角度==360度，橙色圓角度》0度時，圓環出現兩種顏色（紅色、橙色）
>多色圓環進度
title
>
head
>
<
body
>
<
canvas
id="procanvas"
class
="procanvas"
value
="100%"
>
canvas
>
<
script
>
function
process(canvasid,op,stylewidth,styleheight)
else
context.closepath();
context.fillstyle ='
#db3030';
context.fill();
}else
if(process
==100
)
//畫進度(橙色)
if(oprocess !=0
&&oprocess
!=100
)
else
if(oprocess
==100
)
//畫內部空白
context.beginpath();
context.moveto(center[
0], center[
1]);
context.arc(center[
0], center[
1], 21*
scale,
0, math.pi *2
, true
); context.closepath();
context.fillstyle ='
rgba(255,255,255,1)';
context.fill();
} process(
"procanvas",
40,52,
52);
//10是橙色
script
>
body
>
html
>
用HTML5 Canvas 實現的 時鐘
基本動畫的步驟 basic animation steps 用canvas畫一幀動畫，通常需要以下四個步驟 1.清空 canvas 除非接下來要畫的內容會完全充滿 canvas 例如背景圖 否則你需要清空所有。最簡單的做法就是用 clearrect 方法。2.儲存 canvas 狀態 如果你要改變一...
HTML5 canvas 繪製圓形
canvas繪製圓形的思路 1 建立路徑 beginpath 2 建立圓形的路徑 3 關閉路徑 closepath 路徑不關閉也能繪製出圖形 4 設定繪製樣式。建立圓形路徑時需要用到物件的arc方法，方法定義如 arc x,y,radius,startangle,endangle,countercl...
HTML5 canvas擦除無效
部分安卓手機上會出現canvas內圖表重疊，並且清除無效，屬於偶現缺陷，非常難以確定其產生原因，比如下圖這個樣子，第一次繪製的圖形沒有擦除，導致第二次繪製時出現重影 初步考慮為裝置自身問題，引起canvasapi的context.clearrect執行無效。在經過一些嘗試之後，發現在每次擦除 cle...