SOURCE

window.onload = function() {

  setupGLEnv("glCanvas");
  glInfoNode = document.getElementById("glInfo");
  program = makeProgram();
  triangleBuffer = makeBuffer();
  renderLoop();
}
function render(deltaTime, elapesdTime) {
    console.log(elapesdTime);
  gl.viewport(0, 0, canvas.width, canvas.height);
  gl.clearColor(1, 0, 1, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);

  gl.useProgram(program);
  gl.bindBuffer(gl.ARRAY_BUFFER, triangleBuffer);
  positionLoc = gl.getAttribLocation(program, 'position');
    elapsedTimeUniformLoc = gl.getUniformLocation(program, 'elapsedTime');
  gl.uniform1f(elapsedTimeUniformLoc, elapesdTime%1000);
  gl.enableVertexAttribArray(positionLoc);
  gl.vertexAttribPointer(positionLoc, 3, gl.FLOAT, false, 4 * 3, 0);

  gl.drawArrays(gl.TRIANGLES, 0, 3);


}
lastRenderTime = 0;
deltaTime = 0;
now = 0;
elapsedTime = 0;
collectedFrameDuration = 0;
collectedFrameCount = 0;
function renderLoop() {
  now = (new Date()).getTime();
  deltaTime = now - lastRenderTime;
  lastRenderTime = now;
  elapsedTime += deltaTime;

  render(deltaTime, elapsedTime);

  collectedFrameDuration += deltaTime;
  collectedFrameCount++;
  if (collectedFrameCount >= 10) {
    fps = parseInt(1000.0 * collectedFrameCount / collectedFrameDuration);
    if (isNaN(fps) == false || fps < 1000) {
      glInfoNode.textContent = "FPS: " + fps;
    }
    collectedFrameCount = 0;
    collectedFrameDuration = 0;
  }
  requestAnimationFrame(renderLoop);
}
function setupGLEnv(canvasID) {
  canvas = document.getElementById(canvasID);
  gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
  if (!gl) {
    alert('天呐！您的浏览器竟然不支持WebGL，快去更新浏览器吧。');
  } else {

}
}
function makeProgram() {
  program = gl.createProgram();

  vertexShaderNode = document.getElementById("shader-vs");
  vertexShader = makeShader(vertexShaderNode.textContent, gl.VERTEX_SHADER);
  fragmentShaderNode = document.getElementById("shader-fs");
  fragmentShader = makeShader(fragmentShaderNode.textContent, gl.FRAGMENT_SHADER);
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);

  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    console.log('Unable to initialize the shader program: ' + gl.getProgramInfoLog(program));
  }
  return program;
}

function makeShader(shaderSrc, shaderType) {
  shader = gl.createShader(shaderType);
  gl.shaderSource(shader, shaderSrc);
  gl.compileShader(shader);
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    console.log('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
    gl.deleteShader(shader);
    return null;
  }
  return shader;
}
function makeBuffer() {
  var triangle = [0.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0, ];
  buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangle), gl.STATIC_DRAW);
  return buffer;
}

<div style="width: 100%; height: 300px; position:relative; background:rgba(0,0,0,0);">
  <canvas id="glCanvas" width="200" height="200">
    Your browser doesn't appear to support the element.
  </canvas>
  <div id="glInfo" style="">
  </div>
</div>
<select id="slect">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
  <script type="javascript">
 var addNewLisbox = document.getElementById("slect"); //获得下拉框对象   

</script>
</body>
</html>
<script type="x-shader/vertex-shader" id="shader-vs">
attribute vec4 position;
varying vec4 fragColor;
uniform float elapsedTime;
void main() {
    fragColor = position * 0.6 + 0.5;
    float rotateAngle = elapsedTime* 0.1;
    float x = position.x * cos(rotateAngle) - position.y * sin(rotateAngle);
    float y = position.x * sin(rotateAngle) + position.y * cos(rotateAngle);
   // gl_Position = vec4(x, y, 0.0, 1);
    gl_Position = vec4(x, y, 0.0, 1);
}
</script>
<script type="x-shader/fragment-shader" id="shader-fs">
  varying mediump vec4 fragColor;
  void main() {
   gl_FragColor = fragColor;

  }
</script>