Question

好的，我现在是html和javascript的新手。我的任务是绘制圆圈，我看过无数的例子，我的代码没有画任何东西。这是我到目前为止所拥有的。

<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPos;

void main()
{
  gl_PointSize = 10.0;
  gl_Position = vPos;
}
</script>

<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
uniform vec4 u_color;

void main() {
    gl_FragColor = u_color;
}
</script>


<script type="text/javascript" src="webgl-utils.js"></script>
<script type="text/javascript" src="initshaders.js"></script>
<script type="text/javascript" src="lines.js"></script>

<script type="text/javascript">
var canvas;
var gl;

window.onload = init;

function init() {
 canvas = document.getElementById("gl-canvas");
gl = WebGLUtils.setupWebGL(canvas);
if (!gl) {
    alert("WebGL isn't available");
  }

 var program = initShaders(gl, "vertex-shader", "fragment-shader");

 var vPos = gl.getAttribLocation(program, "vPos");
 var colorUniformLocation = gl.getUniformLocation(program, "u_color");
var buffer = gl.createBuffer();
 gl.bindBuffer(gl.ARRAY_BUFFER, buffer);



  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

  gl.viewport(0, 0, canvas.width, canvas.height);
  gl.clearColor(0.9, 0.9, 0.9, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);

  gl.useProgram(program);
  gl.enableVertexAttribArray(vPos);
  gl.vertexAttribPointer(vPos, 2, gl.FLOAT, false, 0, 0);

  var red = 0.0;
  var green = 0.0;
  var blue = 1.0;

var vertices = circle(100,100,200);

 for (var i=0; i<vertices.length; i++)
 {
   gl.uniform4f(colorUniformLocation, red, green, blue, 1.0);
   gl.drawArrays(gl.POINTS, i, 1);
  }
  }
     </script>

  <body>
   <canvas id="gl-canvas" width="1000" height="1000">
     Oops... your browser doesn't support HTML5's Canvas elements!
   </canvas>
   </body>
   </html>

错误似乎发生在var vertices = circle（100,100,200）;

我的圈子功能看起来像这样。

function getPoints(x,y)
  {
  var points = [];  
  points.push(x+x0,y+y0);
  points.push(-x+x0,y+y0);
  points.push(x+x0,-y+y0);
  points.push(-x+x0,-y+y0);
  points.push(y+y0,x+x0);
  points.push(-y+y0,x+x0);
  points.push(y+y0,-x+x0);
  points.push(-y+y0,-x+x0);
  return points;
  }
function circle(x0, y0, radius)
{
      var vertices = [];
      var points = [];
      var pk = 1- radius;
      var xk = radius;
      var yk = 0;
    //var pk = ((xk +1)^2) + ((yk -.5)^2) - (radius^2);
 points = getPoints(x0,y0);
 for(var i = 0 ; i < points.length; i++)
     {
     vertices.push(points[i]);
     }

while(xk>yk)
{
    yk++;
    if(pk <0)
    {
    points = getPoints(xk+1,yk);

    pk = pk + (2* yk)+1;
    }
    else
    {
    points = getPoints(xk+1,yk-1);

    xk--;
    pk = pk + (2* yk) -(2* xk)+1;
    }
    for(var i = 0 ; i < points.length; i++)
    {
    vertices.push(points[i]);
    }

}
return vertices;
}

从我能说的算法是正确的，但由于某种原因，var顶点没有正确返回，因为当我启动文件时它会绘制背景，但圆圈无处可见。请帮忙！

UPDATE 所以我修复了一个问题，但我的程序仍然没有打印任何东西。我的圈子功能现在看起来像这样。

 function drawCircle(x0, y0, radius)
{
       var vertices = [];

       var pk = 1- radius;
       var xk = 0;
       var yk = radius;


  //vertices.push(100,100);     I am using these for error checking
  //vertices.push(200,100);     To see if vertices returns anything at all
  //vertices.push(300,100);     and from what i can tell it doesnt.
  //vertices.push(400,100);

  while(xk<yk)
  {
      xk++;
      if(pk <0)
      {
      pk = pk + (2* xk)+1;
      }
      else
      {
      yk--;
      pk = pk + (2* xk) -(2* yk)+1;
      }
      vertices.push(x+x0,y+y0);   //This should be adding all symmetric 
      vertices.push(-x+x0,y+y0);   //points from the first one around the 
      vertices.push(x+x0,-y+y0);    //circle
      vertices.push(-x+x0,-y+y0);
      vertices.push(y+y0,x+x0);
      vertices.push(-y+y0,x+x0);
      vertices.push(y+y0,-x+x0);
      vertices.push(-y+y0,-x+x0);

  }
 return vertices;
 }

中点圆算法没有输出任何东西？

0 个答案: