開發項目，PM會跟蹤項目進度；完成某個事情，也可以設置一個完成的進度。

這里用canvas繪制一個簡單百分比圓環進度條。

看下效果：

1. 動畫方式

2. 靜默方式

貼上代碼，僅供參考

/**

* LBS drawRing

* Date: 2015-04-24

* ==================================

* opts.parent 插入到哪里 一個JS元素對象

* opts.width 寬度 = 2* (半徑+弧寬)

* opts.radius 半徑

* opts.arc 弧寬

* opts.perent 百分比

* opts.color 弧渲染顏色 [底色,進度色]

* opts.textColor 文字渲染顏色

* opts.textSize 文字渲染大小

* opts.animated 是否以動畫的方式繪制 默認false

* opts.after 繪制完成時執行函數

* ==================================

**/

functiondrawRing(opts) {var _opts ={

parent: document.body,

width:100,

radius:45,

arc:5,

perent:100,

color: ['#ccc', '#042b61'],

textColor:'#000',

textSize:'14px',

animated:false,

after:function() {}

}, k;for (k in opts) _opts[k] =opts[k];var parent =_opts.parent,

width=_opts.width,

radius=_opts.radius,

arc=_opts.arc,

perent=parseFloat(_opts.perent),

color=_opts.color,

textSize=_opts.textSize,

textColor=_opts.textColor,

c= document.createElement('canvas'),

ctx= null,

x= 0,

animated=_opts.animated,

after=_opts.after;

parent.appendChild(c);

ctx= c.getContext("2d");

ctx.canvas.width=width;

ctx.canvas.height=width;functionclearFill() {

ctx.clearRect(0, 0, width, width);

}functionfillBG() {

ctx.beginPath();

ctx.lineWidth=arc;

ctx.strokeStyle= color[0];

ctx.arc(width/ 2, width / 2, radius, 0, 2 *Math.PI);

ctx.stroke();

}functionfillArc(x) {

ctx.beginPath();

ctx.lineWidth=arc;

ctx.strokeStyle= color[1];

ctx.arc(width/ 2, width / 2, radius, -90 * Math.PI / 180, (x * 3.6 - 90) * Math.PI / 180);

ctx.stroke();

}functionfillText(x) {

ctx.font= textSize + ' Arial';

ctx.fillStyle=textColor;

ctx.textBaseline= "middle";

ctx.textAlign= 'center';

ctx.fillText(x.toFixed(1) + '%', width / 2, width / 2);

}functionfill(x) {

fillBG();

fillArc(x);

fillText(x);

}if (!animated) returnfill(perent);

fill(x);!functionanimate() {if (++x > perent) return after &&after();

setTimeout(animate,10);

clearFill();

fill(x);

}();

}

View Code

很簡單的一段代碼

先創建一個canvas畫布對象，設置寬高。

var c = document.createElement('canvas');

document.body.appendChild(c);var ctx = c.getContext("2d");

ctx.canvas.width=width;

ctx.canvas.height= width;

圓環由兩部分組成，底部灰色完整的環，根據百分比變動的環。

先繪制底部完整的環。

//起始一條路徑

ctx.beginPath();//設置當前線條的寬度

ctx.lineWidth = 10; //10px//設置筆觸的顏色

ctx.strokeStyle = '#ccc';//arc() 方法創建弧/曲線(用于創建圓或部分圓)

ctx.arc(100, 100, 90, 0, 2 *Math.PI);//繪制已定義的路徑

ctx.stroke();

arc方法默認是從3點鐘方向(90度)開始繪制的，一般要把這個開始處設置平常習慣的0點方向。

也需要理解弧度和角度的互相轉換。

degrees = radians * 180/Math.PI

角度等于弧度乘于180再除于PI

radians= degrees * Math.PI/180

弧度等于角度度乘于PI再除于180

繪制根據百分比變動的環。

ctx.beginPath();

ctx.lineWidth= 10;

ctx.strokeStyle= '#f30';//設置開始處為0點鐘方向(-90 * Math.PI / 180)//x為百分比值(0-100)

ctx.arc(100, 100, 90, -90 * Math.PI / 180, (x * 3.6 - 90) * Math.PI / 180);

ctx.stroke();

繪制中間的文字

ctx.font = '40px Arial';

ctx.fillStyle= '#f30';

ctx.textBaseline= 'middle';

ctx.textAlign= 'center';

ctx.fillText('50.0%', 100, 100);

到此一個靜止的百分比圓環進度條就繪制完成了。

不滿足于繪制靜態的，動態的更生動有趣一些。

canvas動態繪制就是在一段時間內：繪制一個區域的內容，清除這個區域內容，再重新繪制內容，重復這個過程(繪制-清除-繪制)。

有興趣可以去研究一下，上面的代碼也可以參考，如果結合動畫函數和運動公式可以繪制更生動的百分比圓環進度條哦。

--------------------------------------------

參考:

總結

以上是生活随笔為你收集整理的java如何画百分比圆环_canvas绘制百分比圆环进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。