開發(fā)項(xiàng)目，PM會(huì)跟蹤項(xiàng)目進(jìn)度；完成某個(gè)事情，也可以設(shè)置一個(gè)完成的進(jìn)度。

這里用canvas繪制一個(gè)簡(jiǎn)單百分比圓環(huán)進(jìn)度條。

看下效果：

1. 動(dòng)畫方式

2. 靜默方式

貼上代碼，僅供參考

/**

* LBS drawRing

* Date: 2015-04-24

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

* opts.parent 插入到哪里 一個(gè)JS元素對(duì)象

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

* opts.radius 半徑

* opts.arc 弧寬

* opts.perent 百分比

* opts.color 弧渲染顏色 [底色,進(jìn)度色]

* opts.textColor 文字渲染顏色

* opts.textSize 文字渲染大小

* opts.animated 是否以動(dòng)畫的方式繪制 默認(rèn)false

* opts.after 繪制完成時(shí)執(zhí)行函數(shù)

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

**/

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

很簡(jiǎn)單的一段代碼

先創(chuàng)建一個(gè)canvas畫布對(duì)象，設(shè)置寬高。

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

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

ctx.canvas.width=width;

ctx.canvas.height= width;

圓環(huán)由兩部分組成，底部灰色完整的環(huán)，根據(jù)百分比變動(dòng)的環(huán)。

先繪制底部完整的環(huán)。

//起始一條路徑

ctx.beginPath();//設(shè)置當(dāng)前線條的寬度

ctx.lineWidth = 10; //10px//設(shè)置筆觸的顏色

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

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

ctx.stroke();

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

也需要理解弧度和角度的互相轉(zhuǎn)換。

degrees = radians * 180/Math.PI

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

radians= degrees * Math.PI/180

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

繪制根據(jù)百分比變動(dòng)的環(huán)。

ctx.beginPath();

ctx.lineWidth= 10;

ctx.strokeStyle= '#f30';//設(shè)置開始處為0點(diǎn)鐘方向(-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);

到此一個(gè)靜止的百分比圓環(huán)進(jìn)度條就繪制完成了。

不滿足于繪制靜態(tài)的，動(dòng)態(tài)的更生動(dòng)有趣一些。

canvas動(dòng)態(tài)繪制就是在一段時(shí)間內(nèi)：繪制一個(gè)區(qū)域的內(nèi)容，清除這個(gè)區(qū)域內(nèi)容，再重新繪制內(nèi)容，重復(fù)這個(gè)過(guò)程(繪制-清除-繪制)。

有興趣可以去研究一下，上面的代碼也可以參考，如果結(jié)合動(dòng)畫函數(shù)和運(yùn)動(dòng)公式可以繪制更生動(dòng)的百分比圓環(huán)進(jìn)度條哦。

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

參考:

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。