百分比進度條

「百分比進度條」是平時開啟軟體、程序、啟動遊戲時，經常能看到的一種屏幕效果。這種基本的程序運行及統計效果，也是需要通過編程來實現的。今天，就讓我們來親手編一段「百分比進度條」程序，看看習以為常的進度條里，到底蘊含了哪些編程知識和數學原理。

步驟說明：

01 創建一個800*100像素的窗體（畫布）。

void setup(){ size(800,100);}void draw(){ background(255); }

02 從左到右，逐漸變長的藍色進度條。

void setup(){ size(800,100);}int x=20;void draw(){ background(255); stroke(0,0,255); strokeWeight(25); line(20,height/2,x,height/2); x+=3; if(x>(width-20)){noLoop();}}

詳細說明：

stroke(0,0,255);strokeWeight(25);

stroke()函數設置線（line）的顏色，RGB值（0,0,255）代表藍色。

strokeWeight()函數設置線寬（粗細）。

int x=20;

創建、聲明int數據類型變數x，用以存儲、控制進度條的橫坐標值，初始值設為20。

line(20,height/2,x,height/2);x+=3;if(x>(width-20)){noLoop();}

直線的起始點坐標為（20，height/2），終止點坐標為（x，height/2）。兩個點的縱坐標值相等，說明直線是一條水平線。起始點的橫坐標值為常量20，終止點的橫坐標值為變數x，因此計算機在不停地畫不同的直線，這條直線左端「固定」、重合，右邊以3為步長（Steps）遞增，越來越長，直至最長（width-20），即距離窗體右側邊緣20個像素的位置，結束變化。

if(條件){執行代碼}

當條件滿足x>(width-20)時，調用noLoop()函數，讓程序終止。

運行效果：

03 在進度條上方，實時顯示百分比數值。

void setup(){ size(800,100);}int x=20;void draw(){ background(255); stroke(0,0,255); strokeWeight(25); line(20,height/2,x,height/2); x+=3; int pc=(x-20)*100/(width-40); fill(0); textSize(20); text(pc+"%",x-40,30); if(x>(width-20)){noLoop();}}

詳細說明：

創建、聲明新int數據類型變數pc，根據變數x的值，通過公式計算百分比值：

int pc=(x-20)*100/(width-40);

進度條當前的長度等於x值減去初始值20。進度條的總長度等於屏幕的寬度width減去左側空出的初始值20，和右側結束時空開右側邊緣的寬度值20。

公式為：

%

設置字體填充色為黑色：

fill(0);

設置字體大小為20：

textSize(20);

調用text()函數，在坐標（x-40，30）上，顯示百分比值：

text(pc+"%",x-40,30);

由於橫坐標的值是變數（x-40），因此text()函數顯示百分比的最終效果，是動態地跟著進度條一起「向右跑」的。

程序最終運行效果、分時圖：

程序設計及測試完畢。