canvas，JavaScript，html

Question

想要添加一个“移动”功能按钮，但是点击按钮没反应，怎么修改我的代码？给我修改后的代码，或者把“移动”功能换成其它功能

var gl;
var angle = 0.0;
var delta = 60.0;
var size = 25;
var u_Angle;

window.onload = function main(){   
    var canvas = document.getElementById("webgl");    
    if(!canvas){    
        alert("获取canvas元素失败!");
        return;
    }
    
    gl = WebGLUtils.setupWebGL(canvas);    
    if (!gl){    
        alert("获取WebGL上下文失败! ");
        return;
    }
    
    
    var vertices = [
        0.0,0.0,
        0.0,size,
        size,size,
        size,0.0
    ];
    
    
    /*设置WebGL相关属性*/
    var rect = canvas.getBoundingClientRect();
    canvas.width = innerWidth - 2 * rect.left;
    canvas.height = innerHeight - 80;
    if(canvas.width > canvas.heiht)
        gl.viewport((canvas.width - canvas.height) / 2,
        0,
        canvas.height,
        canvas.height);
    else
        gl.viewport(0,
                    (canvas.height - canvas.width) / 2,
                    2,
                    canvas.width,
                    canvas.height);

    gl.clearColor(0.0,0.0,0.0,1.0);
    
    var program = initShaders(gl,"vertex-shader","fragment-shader");
    gl.useProgram(program);
    
    
    var bufferId = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER,bufferId);
    gl.bufferData(gl.ARRAY_BUFFER,   
        flatten(vertices),    
        gl.STATIC_DRAW);    
    
    var a_Position = gl.getAttribLocation(program,"a_Position");
    if(a_Position < 0){    
        alert("获取attribute变量a_Position失！");
        return;
    }
    
    gl.vertexAttribPointer(a_Position,    
        2,    
        gl.FLOAT,    
        false,    
        0,    
        0);    
    gl.enableVertexAttribArray(a_Position);    
    
    u_Angle = gl.getUniformLocation(program,"u_Angle");
    if(!u_Angle){    
        alert("获取uniform变量u_Angle失败！");
        return;
    }
    
    var u_matProj = gl.getUniformLocation(program,"u_matProj");
    if(!u_matProj){    
        alert("获取uniform变量u_matProj失败！");
        return;
    }
    
    var matProj = ortho2D(-size * 2,size * 2,-size * 2 ,size * 2);
    gl.uniformMatrix4fv(u_matProj,false,flatten(matProj));
    
    
    
    var u_Color = gl.getUniformLocation(program,"u_Color");
    if(!u_Color){    
        alert("获取uniform变量u_Color失败！");
        return;
    }
    gl.uniform3f(u_Color,1.0,1.0,1.0);
    
    
    
    /*加速按钮功能实现*/
    var incButton = document.getElementById("IncSpeed");
    if (!incButton){
        alert("获取按钮元素IncSpeed失败！");
    }
    /*添加按钮点击事件响应*/
    incButton.onclick = function(){
        delta *= 2;
    };
    /*减速按钮功能实现*/
    var decButton = document.getElementById("DecSpeed");
    if(!decButton){
        alert("获取按钮元素decButton失败！");
    }
    //添加按钮点击事件响应
    decButton.onclick = function(){
        delta /= 2;
    };
    //////////////////////////////////////////////////////////////////
    var moveButton = document.getElementById("MoveButton");
    if(!moveButton){
        alert("获取按钮元素moveButton失败！");
    }
    moveButton.onclick = function () {
       moveSquare(5, 0);  // 示例：每次点击按钮使正方形向右移动 5 个单位
    };
    function moveSquare(directionX, directionY) {
        // 在这里修改绘制内容的位置相关参数
        // 根据方向 X 和方向 Y 修改正方形的位置
        vertices[0][0] += directionX;
        vertices[1][0] += directionX;
        vertices[2][0] += directionX;
        vertices[3][0] += directionX;

        vertices[0][1] += directionY;
        vertices[1][1] += directionY;
        vertices[2][1] += directionY;
        vertices[3][1] += directionY;
    };
    
    
    
    //处理菜单
    var colorMenu = document.getElementById("ColorMenu");
    if (!colorMenu){
        alert("获取按钮元素colorMenu失败！");
    }
    //添加菜单项点击事件响应
    colorMenu.onclick = function(){
        switch(event.target.index){
            case 0:
                gl.uniform3f(u_Color,1.0,1.0,1.0);
                break;
            case 1:
                gl.uniform3f(u_Color,1.0,0.0,0.0);
                break;
            case 2:
                gl.uniform3f(u_Color,0.0,1.0,0.0);
                break;
            case 3:
                gl.uniform3f(u_Color,0.0,0.0,1.0);
                break;
        }
    }
    
    //添加页面窗口resize事件响应
    window.onresize = function(){
        var rect = canvas.getBoundingClientRect();
        canvas.width = innerWidth - 2 * rect.left;
        canvas.height = innerHeight - 80;
        if(canvas.width > canvas.height)
            gl.viewport((canvas.width - canvas.height) / 2,0,canvas.height,canvas.width);
        else 
            gl.viewport(0,(canvas.height - canvas.width) / 2,canvas.width,canvas.height);
    }
    
    
    
    render();
    

};

var last = Date.now();

function render() {
    var now = Date.now();
    var elapsed = now - last;
    last = now;
    
    angle += delta * elapsed / 1000.0;
    angle %= 360;
    
    gl.uniform1f(u_Angle,angle);
    
    gl.clear(gl.COLOR_BUFFER_BIT);    
    
    gl.drawArrays(gl.TRIANGLE_FAN,    
        0,    
        4);   
    requestAnimFrame(render);
}

<!DOCTYPE html> <!--表示文档类型位HTML-->
<html>            
    <head>
        <meta charset = "utf-8">
        <title>202103024500刘迎春</title>
    </head>
    
    <body>
        <canvas id="webgl" width="512" height="512">
        对不起，你的浏览器不支持HTML5的canvas元素！
        </canvas>
        
        <div>
        <button id = "IncSpeed">加速</button>
        <button id = "DecSpeed">减速</button>
        <button id = "MoveButton">移动</button>
        正方形颜色：
        <select id = "ColorMenu" size = "3">
            <option value = "0">白色</option>
            <option value = "1">红色</option>
            <option value = "2">绿色</option>
            <option value = "3">蓝色</option>
        </select>
        </div>
            
        
        
        
        
        
        
        
        
        <!--顶点shader程序-->
        <script id="vertex-shader" type="x-shader/x-vertex">
        attribute vec2 a_Position;  //输入二位顶点位置属性
        uniform mat4 u_matProj;  //投影矩阵
        uniform float u_Angle;  //旋转角度
        void main(){
            vec4 pos = vec4(a_Position,0,1);
            float rad = radians(u_Angle);
            /*实现旋转*/
            pos.x = a_Position.x * cos(rad) - a_Position.y * sin(rad);
            pos.y = a_Position.x * sin(rad) + a_Position.y * cos(rad);
            gl_Position = u_matProj * pos;
        }
        </script>
        
        
        <!--片元shader程序-->
        <script id="fragment-shader" type="x-shader/x-fragment">
        precision mediump float;
        uniform vec3 u_Color;
        void main(){
            gl_FragColor = vec4(u_Color,1.0);
        }
        </script>
        
        
        <script type="text/javascript" src="./Common/webgl-utils.js"></script>
        <script type="text/javascript" src="./Common/initShaders.js"></script>
        <script type="text/javascript" src="./Common/MV.js"></script>
        <script type="text/javascript" src="00_MyAnimation.js"></script>
    </body>
</html>

Answer 1

该回答引用自GPT-3.5,由博主GISer Liu编写：

从您的代码中可以看出，移动按钮的点击事件调用了moveSquare函数，但是moveSquare函数中的操作有误。在JavaScript中，数组是从0开始索引的，但是您尝试在二维数组vertices中直接修改元素。这会导致语法错误。此外，由于您使用了顶点数组中的坐标直接进行绘制，修改``` vertices

为了解决这个问题，您可以将``` vertices
```数组中的坐标值分别存储在变量中，并在移动按钮点击事件中更新这些变量的值，然后重新绘制正方形。下面是修改后的代码：
javascriptCopy code

var gl;
var angle = 0.0;
var delta = 60.0;
var size = 25;
var u_Angle;
// 声明顶点坐标变量
var squareVertices = [
0.0, 0.0,
0.0, size,
size, size,
size, 0.0
];
window.onload = function main() {
var canvas = document.getElementById("webgl");
if (!canvas) {
alert("获取canvas元素失败!");
return;
}
gl = WebGLUtils.setupWebGL(canvas);
if (!gl) {
alert("获取WebGL上下文失败! ");
return;
}
// 其他代码省略...
var moveButton = document.getElementById("MoveButton");
if (!moveButton) {
alert("获取按钮元素moveButton失败！");
}
moveButton.onclick = function () {
moveSquare(5, 0); // 示例：每次点击按钮使正方形向右移动 5 个单位
render(); // 移动后重新渲染
};
// 其他代码省略...
};
function moveSquare(directionX, directionY) {
// 更新顶点坐标数组中的值
squareVertices[0] += directionX;
squareVertices[2] += directionX;
squareVertices[4] += directionX;
squareVertices[6] += directionX;
squareVertices[1] += directionY;
squareVertices[3] += directionY;
squareVertices[5] += directionY;
squareVertices[7] += directionY;
}
function render() {
// 渲染时使用更新后的顶点坐标数组
gl.clear(gl.COLOR_BUFFER_BIT);
gl.bufferData(gl.ARRAY_BUFFER, flatten(squareVertices), gl.STATIC_DRAW);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
}

```
这样修改后，点击移动按钮时，正方形会向右移动5个单位，并且每次移动后会重新渲染。

如果该回答解决了您的问题，请采纳！如果没有，请私信联系或评论您的疑惑