由于项目需求，需要绘制一些进度条，但是很多东西都让人头疼的，好看的效果，就难道我们程序员了，比如下面这个
（图片只是效果展）
其实有好多种实现的方式，我这边提供我已经做好的一个实现方式，后续比如HTML5实现，JS实现后期会进行巩固。，废话不多说，先看一下代码吧。
1.这里为后台代码（使用asp.net做的）
using System; using System.Collections.Generic; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Drawing; using System.Drawing.Drawing2D; namespace WebApplication1 { public partial class WebForm7 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void Button1_Click(object sender, EventArgs e) { int w = Convert.ToInt32(TextBox1.Text) ; //设计图片宽度 int h = Convert.ToInt32(TextBox1.Text) ;//设计图片高度 Image1.Width = w; Image1.Height = h; Bitmap bmp = new Bitmap(w, h); int pointXY = Convert.ToInt32(TextBox2.Text) ;//这个为圆心坐标，这里为了方便 X和Y一样 string[] numXY = TextBox3.Text.Split(',');//这是画笔数字的左边，和其它的圆心坐标有点出入，数字有长有短，需要随时改变中心位置 int outXY = Convert.ToInt32(TextBox4.Text);//这个为外圆的大小 float hS = Convert.ToSingle(TextBox5.Text);//这个为弧线的起始位置 float hE = Convert.ToSingle(TextBox6.Text);//这个为弧度，满为360 ////141,202,52 Pen n2 = new Pen(Color.FromArgb(234, 243, 221), 25); //定义一绿色画笔 // Pen n = new Pen(Color.White, 25); //定义一绿色画笔 Graphics gc; //声明一 GDI+ 绘图面 gc = Graphics.FromImage(bmp); //从指定的 Image 创建新的 Graphics gc.SmoothingMode = SmoothingMode.AntiAlias;//消除锯齿 Point p = new Point(pointXY, pointXY); //定义一个点的水平位置 // Rectangle rg = new Rectangle(pointXY, pointXY, inXY, inXY); //gc.DrawEllipse(n, rg); //画空心圆 // Brush bru = new SolidBrush(Color.White); // gc.FillEllipse(bru, rg); //填充空心圆，实心圆 // gc.DrawEllipse(n, pointXY, pointXY, inXY, inXY); //外圆 gc.DrawEllipse(n2, pointXY, pointXY, outXY, outXY);//内圆 Pen pen1 = new Pen(Color.FromArgb(141, 202, 52), 25);//弧度画笔 gc.DrawArc(pen1, pointXY, pointXY, outXY, outXY, hS, hE);//画幅度 // float leftps = Math.Abs(Math.Abs(hS) - Math.Abs(hE)); float ps = (hE / 360) * 100;//计算幅度的百分比 int toshow = Convert.ToInt32(ps);//转化为整数 gc.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias;//消除文字锯齿 gc.DrawString(toshow + "%", new Font("幼圆", 24f, FontStyle.Regular), new SolidBrush(Color.FromArgb(141, 202, 52)), Convert.ToInt32(numXY[0]), Convert.ToInt32(numXY[1]));//开始画字，第一个参数为写什么字，我这里为 百分比 bmp.Save(Server.MapPath("~/a.bmp")); Image1.ImageUrl = "~/a.bmp"; gc.Dispose(); } } }
2.这里为前代代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="画圆.aspx.cs" Inherits="WebApplication1.WebForm7" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body style="background-color:Gray;"> <form id="form1" runat="server"> <div> 图片大小： <asp:TextBox ID="TextBox1" runat="server" Text="180"></asp:TextBox> <br /> <br /> 圆心位置：<asp:textbox ID="TextBox2" runat="server" Text="16"></asp:textbox> <br /> <br /> 文字坐标：<asp:textbox ID="TextBox3" runat="server" Text="60,75"></asp:textbox> <br /> <br /> 外圆大小：<asp:textbox ID="TextBox4" runat="server" Text="150"></asp:textbox> <br /> <br /> 弧线起始：<asp:textbox ID="TextBox5" runat="server" Text="135"></asp:textbox> <br /> <br /> 弧线度数：<asp:textbox ID="TextBox6" runat="server" Text="180"></asp:textbox> <br /> <br /> <asp:Button ID="Button1" runat="server" Text="生成圆" onclick="Button1_Click" /> <br /> <br /> <asp:Image ID="Image1" runat="server" /> <br /> <br /> </div> </form> </body> </html>
结语：所有的可以根据里面的参数进行修改，比较简单，就是生成需要点时间