我用OpenGL做了几个简单的健康条。第一个是你要求的，其他的是为了好玩：）
为了便于说明，所有的代码都是用旧的OpenGL编写的。函数将health作为0到1之间的一个数字，并在y = 0处绘制一个高度为1.0的正方形，以Y轴为中心。屏幕截图显示health为0.3，0.5和1.0。
1.矩形的高度与健康值成正比：

void drawHealth(float health) {
  glBegin(GL_QUADS);
    glColor3f(1, 0, 0);
    glVertex2f(0, 0);
    glVertex2f(1, 0);
    glVertex2f(1, health);
    glVertex2f(0, health);
  glEnd();
}

1.矩形的颜色与健康成正比：

void drawHealth2(float health) {
  glBegin(GL_QUADS);
    glColor3f(health, 0, 0);
    glVertex2f(0, 0);
    glVertex2f(1, 0);
    glVertex2f(1, 1);
    glVertex2f(0, 1);
  glEnd();
}

1.这个版本创建了一种渐变。动画效果看起来不错，但图片效果不太好。

void drawHealth3(float health) {
  glBegin(GL_QUADS);
    glColor3f(1, 0, 0);
    glVertex2f(0, 0);
    glVertex2f(1, 0);
    glColor3f(health, 0, 0);
    glVertex2f(1, health);
    glVertex2f(0, health);
    glVertex2f(0, health);
    glVertex2f(1, health);
    glColor3f(0, 0, 0);
    glVertex2f(1, 1);
    glVertex2f(0, 1);
  glEnd();
}

1.此版本绘制离散条形图。

void drawHealth4(float health) {
  const int numDiv = 15;
  const float sep = 0.04;
  const float barHeight = 1.0/(float)numDiv;
  glBegin(GL_QUADS);
    glColor3f(1, 0, 0);
    for(float i = 0; i < health; i += (sep + barHeight)) {
      glVertex2f(0, i);
      glVertex2f(1, i);
      glVertex2f(1, i + barHeight);
      glVertex2f(0, i + barHeight);
    }
  glEnd();
}

glColor4f(r,g,b,a);
glBegin(GL_QUADS);
glVertex2d(-R,-1.0);
glVertex2d(R,-1.0);
glVertex2d(R,1.0);
glVertex2d(-R,1.0);
glEnd();

下面是一个绘制你想要的颜色的四边形的例子，用你的四边形的端点替换glVertex2d的参数。要制作一个能量水平条，只需绘制一个背景四边形，然后在它里面绘制一个四边形来表示填充部分。使用坐标来控制内部四边形的大小。

可以创建两个四边形，而不是动态长度的四边形。
1.首先初始化两个长度为x和l-x的四边形（比如A和B）。

1. id强度增加，你只需要增加A的长度，减少B的长度相同的数量。
   我认为这足以让人明白这个想法。