Fatal编程技术网
  • javascript/
  • Javascript 下拉菜单，从用户处获取输入

Javascript 下拉菜单，从用户处获取输入

javascript html

Javascript 下拉菜单，从用户处获取输入,javascript,html,Javascript,Html,我没有javascript和HTML的经验，但我想设计一个界面。故事是这样的 我正在使用webgl设计和实现一些参数方程。每个方程由x、y和a组成。我可以让浏览器独立地画出我的方程式，但我不能让它一劳永逸 因此，对于步骤1，我编写了一些javascript函数来调用，但它似乎不起作用 这是我的密码 <!doctype html> <html> <body> <p>Please input a number between 0.1 and 1:&l

我没有javascript和HTML的经验，但我想设计一个界面。故事是这样的

我正在使用webgl设计和实现一些参数方程。每个方程由x、y和a组成。我可以让浏览器独立地画出我的方程式，但我不能让它一劳永逸

因此，对于步骤1，我编写了一些javascript函数来调用，但它似乎不起作用

这是我的密码

<!doctype html>
<html>
<body>
<p>Please input a number between 0.1 and 1:</p>

<input id="numb">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

<canvas width = "300" height = "300" id = "my_Canvas"></canvas>
<script>
function myFunction() {
var a, text;

// Get the value of the input field with id="numb"
a = document.getElementById("numb").value;
}
/* Step1: Prepare the canvas and get WebGL context */
var canvas = document.getElementById('my_Canvas');
var gl = canvas.getContext('experimental-webgl');
/* Step2: Define the geometry and store it in buffer objects */
var vertices = new Array();
//myFunction does not work, so i have to initialize a in here 
a = 0.3; 
var x;
var y; 
var tmp;
tmp = 0;
x = 0;
y = 0;

  for (t=0;t<360;t+=0.01){
    //these are for cart
   x=a*(2*Math.cos(t)-Math.cos(2*t));
   y=a*(2*Math.sin(t)-Math.sin(2*t));

    vertices.push(x);
    //these are for other funct
    //x = a*Math.pow(Math.cos(t),3);
    //y = a*Math.pow(Math.sin(t),3);
    vertices.push(y);
     tmp++;

}

     // Create a new buffer object
     var vertex_buffer = gl.createBuffer();
     // Bind an empty array buffer to it
      gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
     // Pass the vertices data to the buffer
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
       // Unbind the buffer
      gl.bindBuffer(gl.ARRAY_BUFFER, null);

     /* Step3: Create and compile Shader programs */
     // Vertex shader source code
      var vertCode = 'attribute vec2 coordinates;' + 'void main(void) {' + '             gl_Position = vec4(coordinates,0.0, 1.0);' + '}';

    //Create a vertex shader object
    var vertShader = gl.createShader(gl.VERTEX_SHADER);
    //Attach vertex shader source code
    gl.shaderSource(vertShader, vertCode);
    //Compile the vertex shader
    gl.compileShader(vertShader);
    //Fragment shader source code
    var fragCode = 'void main(void) {' + 'gl_FragColor = vec4(0.0, 0.0,         0.0,0.1);' + '}';
    // Create fragment shader object
    var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
    // Attach fragment shader source code
    gl.shaderSource(fragShader, fragCode);
    // Compile the fragment shader
    gl.compileShader(fragShader);

    // Create a shader program object to store combined shader program
    var shaderProgram = gl.createProgram();
    // Attach a vertex shader
    gl.attachShader(shaderProgram, vertShader);
    // Attach a fragment shader
    gl.attachShader(shaderProgram, fragShader);
    // Link both programs
    gl.linkProgram(shaderProgram);
    // Use the combined shader program object
    gl.useProgram(shaderProgram);
    /* Step 4: Associate the shader programs to buffer objects */
    //Bind vertex buffer object
    gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
    //Get the attribute location
    var coord = gl.getAttribLocation(shaderProgram, "coordinates");
    //point an attribute to the currently bound VBO
    gl.vertexAttribPointer(coord, 2, gl.FLOAT, false, 0, 0);
    //Enable the attribute
    gl.enableVertexAttribArray(coord);
    /* Step5: Drawing the required object (triangle) */
    // Clear the canvas
    gl.clearColor(0.5, 0.5, 0.5, 0.9);
    // Enable the depth test
    gl.enable(gl.DEPTH_TEST);
    // Clear the color buffer bit
    gl.clear(gl.COLOR_BUFFER_BIT);
    // Set the view port
    gl.viewport(0,0,canvas.width,canvas.height);
    // Draw the triangle
    gl.drawArrays(gl.LINES, 0, tmp);
    </script>
    </body>
     </html>


请输入一个介于0.1和1之间的数字：

提交


函数myFunction（）{
变量a，文本；
//使用id=“numb”获取输入字段的值
a=document.getElementById（“numb”）.value；
}
/*步骤1：准备画布并获取WebGL上下文*/
var canvas=document.getElementById（'my_canvas'）；
var gl=canvas.getContext（'experimental-webgl'）；
/*步骤2：定义几何体并将其存储在缓冲区对象中*/
var顶点=新数组（）；
//myFunction不工作，所以我必须在这里初始化
a=0.3；
var x；
变量y；
var-tmp；
tmp=0；
x=0；
y=0；

对于（t=0；t，我对您的代码进行了一些编辑，并将其放在JSFIDLE上，这样您就可以看到它正在工作。
您遇到的主要问题是函数在获得画布的值后无法更改画布，因此我将画布设置包装在一个函数中，默认情况下调用它，并在有人输入后调用它


function myFunction() {
  var a, text;

  // Get the value of the input field with id="numb"
  a = document.getElementById("numb").value;
  alterCanvas(a); //Call function that alters the canvas
}

function alterCanvas(a) { //Create a function to setup and alter the canvas
  /* Step1: Prepare the canvas and get WebGL context */
  var canvas = document.getElementById('my_Canvas');
  var gl = canvas.getContext('experimental-webgl');
  /* Step2: Define the geometry and store it in buffer objects */
  var vertices = new Array();
  //myFunction does not work, so i have to initialize a in here 

  if (typeof a == "undefined") a = 0.3;
  var x;
  var y;
  var tmp;
  tmp = 0;
  x = 0;
  y = 0;

  for (t = 0; t < 360; t += 0.01) {
    //these are for cart
    x = a * (2 * Math.cos(t) - Math.cos(2 * t));
    y = a * (2 * Math.sin(t) - Math.sin(2 * t));

    vertices.push(x);
    //these are for other funct
    //x = a*Math.pow(Math.cos(t),3);
    //y = a*Math.pow(Math.sin(t),3);
    vertices.push(y);
    tmp++;

  }

  // Create a new buffer object
  var vertex_buffer = gl.createBuffer();
  // Bind an empty array buffer to it
  gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
  // Pass the vertices data to the buffer
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  // Unbind the buffer
  gl.bindBuffer(gl.ARRAY_BUFFER, null);

  /* Step3: Create and compile Shader programs */
  // Vertex shader source code
  var vertCode = 'attribute vec2 coordinates;' + 'void main(void) {' + '             gl_Position = vec4(coordinates,0.0, 1.0);' + '}';

  //Create a vertex shader object
  var vertShader = gl.createShader(gl.VERTEX_SHADER);
  //Attach vertex shader source code
  gl.shaderSource(vertShader, vertCode);
  //Compile the vertex shader
  gl.compileShader(vertShader);
  //Fragment shader source code
  var fragCode = 'void main(void) {' + 'gl_FragColor = vec4(0.0, 0.0,         0.0,0.1);' + '}';
  // Create fragment shader object
  var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
  // Attach fragment shader source code
  gl.shaderSource(fragShader, fragCode);
  // Compile the fragment shader
  gl.compileShader(fragShader);

  // Create a shader program object to store combined shader program
  var shaderProgram = gl.createProgram();
  // Attach a vertex shader
  gl.attachShader(shaderProgram, vertShader);
  // Attach a fragment shader
  gl.attachShader(shaderProgram, fragShader);
  // Link both programs
  gl.linkProgram(shaderProgram);
  // Use the combined shader program object
  gl.useProgram(shaderProgram);
  /* Step 4: Associate the shader programs to buffer objects */
  //Bind vertex buffer object
  gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
  //Get the attribute location
  var coord = gl.getAttribLocation(shaderProgram, "coordinates");
  //point an attribute to the currently bound VBO
  gl.vertexAttribPointer(coord, 2, gl.FLOAT, false, 0, 0);
  //Enable the attribute
  gl.enableVertexAttribArray(coord);
  /* Step5: Drawing the required object (triangle) */
  // Clear the canvas
  gl.clearColor(0.5, 0.5, 0.5, 0.9);
  // Enable the depth test
  gl.enable(gl.DEPTH_TEST);
  // Clear the color buffer bit
  gl.clear(gl.COLOR_BUFFER_BIT);
  // Set the view port
  gl.viewport(0, 0, canvas.width, canvas.height);
  // Draw the triangle
  gl.drawArrays(gl.LINES, 0, tmp);
}
alterCanvas(); //Run function when the dom gets here.



函数myFunction（）{
变量a，文本；
//使用id=“numb”获取输入字段的值
a=document.getElementById（“numb”）.value；
alterCanvas（a）；//调用更改画布的函数
}
函数alterCanvas（a）{//创建一个函数来设置和更改画布
/*步骤1：准备画布并获取WebGL上下文*/
var canvas=document.getElementById（'my_canvas'）；
var gl=canvas.getContext（'experimental-webgl'）；
/*步骤2：定义几何体并将其存储在缓冲区对象中*/
var顶点=新数组（）；
//myFunction不工作，所以我必须在这里初始化
如果（a的类型==“未定义”）a=0.3；
var x；
变量y；
var-tmp；
tmp=0；
x=0；
y=0；
对于（t=0；t<360；t+=0.01）{
//这些是给购物车的
x=a*（2*Math.cos（t）-Math.cos（2*t））；
y=a*（2*Math.sin（t）-Math.sin（2*t））；
顶点。推（x）；
//这些是用于其他功能的
//x=a*Math.pow（Math.cos（t），3）；
//y=a*Math.pow（Math.sin（t），3）；
顶点。推（y）；
tmp++；
}
//创建一个新的缓冲区对象
var vertex_buffer=gl.createBuffer（）；
//将空数组缓冲区绑定到它
gl.bindBuffer（gl.ARRAY\u BUFFER，vertex\u BUFFER）；
//将顶点数据传递到缓冲区
gl.bufferData（gl.ARRAY\u BUFFER、新Float32Array（顶点）、gl.STATIC\u DRAW）；
//解除缓冲区的绑定
gl.bindBuffer（gl.ARRAY\u BUFFER，null）；
/*步骤3：创建和编译着色器程序*/
//顶点着色器源代码
var vertCode='属性vec2坐标；'+'空主（空）{'+'gl_位置=vec4（坐标，0.0，1.0）；'+'}'；
//创建顶点着色器对象
var vertShader=gl.createShader（gl.VERTEX\u着色器）；
//附加顶点着色器源代码
gl.shaderSource（vertShader，vertCode）；
//编译顶点着色器
总帐编译头（vertShader）；
//片段着色器源代码
var fragCode='void main（void）{'+'gl_FragColor=vec4（0.0,0.0,0.1）；'+'}'；
//创建片段着色器对象
var fragShader=gl.createShader（gl.FRAGMENT\u着色器）；
//附加片段着色器源代码
gl.shaderSource（fragShader，fragCode）；
//编译片段着色器
总帐编译主管（fragShader）；
//创建着色器程序对象以存储组合的着色器程序
var shaderProgram=gl.createProgram（）；
//附加顶点着色器
gl.attachShader（着色器程序、顶点着色器）；
//附加片段着色器
gl.attachShader（着色器程序，fragShader）；
//链接两个程序
gl.linkProgram（着色器程序）；
//使用组合着色器程序对象
gl.useProgram（shaderProgram）；
/*步骤4：将着色器程序与缓冲区对象关联*/
//绑定顶点缓冲区对象
gl.bindBuffer（gl.ARRAY\u BUFFER，vertex\u BUFFER）；
//获取属性位置
var coord=gl.getAttribLocation（着色器程序，“坐标”）；
//将属性指向当前绑定的VBO
gl.VertexAttributePointer（坐标，2，gl.FLOAT，false，0，0）；
//启用该属性
gl.EnableVertexAttributeArray（coord）；
/*步骤5：绘制所需对象（三角形）*/
//清理画布
gl.clearColor（0.5,0.5,0.5,0.9）；
//启用深度测试
总帐启用（总帐深度测试）；
//清除颜色缓冲位
总账清除（总账颜色缓冲位）；
//设置视图端口
总图视口（0，0，canvas.width，canvas.height）；
//画三角形
总图数组（总图行，0，tmp）；
}
alterCanvas（）；//当dom到达这里时运行函数。



如果你能将其提取到JSFIDLE或其他东西中，我们会更容易提供帮助。此外，你自己编写了这段代码吗？看起来你做了一些复制和粘贴，但我可能错了。我正在学习javascript，绘图函数是从我的opengl库粘贴的，其他函数没有说明步骤是手工制作的，但因为我我是新来的，我可能忘了删除我的一些实验：）为什么不把它放在上面呢？这样，如果JSFIDLE死了，它仍然可以访问，那么？