WebGL 绘制正五边形

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

在这里插入图片描述

No.	内容链接
1	Openlayers 【入门教程】 - 【源代码+示例300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	Cesium 【入门教程】 - 【源代码+图文示例200+】
4	MapboxGL【入门教程】 - 【源代码+图文示例150+】
5	前端就业宝典【面试题+详细答案 1000+】

文章目录

在这里插入图片描述

使用WebGL绘制正五边形涉及到定义五边形的顶点坐标，并使用这些坐标来渲染形状。以下是使用WebGL绘制正五边形的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>WebGL Pentagon</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100%; }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

        if (!gl) {
            alert('WebGL not supported.');
            return;
        }

        // 设置画布大小
        gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

        // 定义正五边形的顶点坐标
        var vertices = [];
        var center = [0.0, 0.0];
        var radius = 0.5;
        for (var i = 0; i < 5; i++) {
            var angle = (i * Math.PI * 2) / 5;
            vertices.push(radius * Math.cos(angle) + center[0]);
            vertices.push(radius * Math.sin(angle) + center[1]);
        }

        // 创建顶点缓冲区
        var vertexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

        // 定义着色器源码
        var vertexShaderSource = `
            attribute vec2 a_position;
            void main() {
                gl_Position = vec4(a_position, 0.0, 1.0);
            }
        `;
        var fragmentShaderSource = `
            precision mediump float;
            void main() {
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }
        `;

        // 创建并编译着色器
        function createShader(gl, type, source) {
            var shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);
            var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
            if (success) {
                return shader;
            }
            console.error(gl.getShaderInfoLog(shader));
            gl.deleteShader(shader);
        }

        var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
        var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

        // 创建并链接着色器程序
        var program = gl.createProgram();
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        // 获取顶点属性位置
        var positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
        gl.enableVertexAttribArray(positionAttributeLocation);
        gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

        // 清除颜色缓冲区
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        // 绘制五边形
        gl.drawArrays(gl.LINE_LOOP, 0, 5); // 使用LINE_LOOP连接所有点形成闭环
    </script>
</body>
</html>

在这个示例中，我们首先计算正五边形的五个顶点坐标。这些坐标是基于圆心（这里设为画布中心）和半径来计算的。然后，我们创建一个顶点缓冲区，将这些顶点坐标传入，并设置着色器。

着色器代码定义了如何处理顶点数据以及如何为每个片段（像素）着色。在这个例子中，我们使用了红色作为填充颜色。

最后，我们使用drawArrays函数，模式设置为LINE_LOOP，这样可以自动连接所有的顶点形成一个闭合的五边形轮廓。如果你想要填充五边形而不是仅仅绘制轮廓，你可以将模式更改为TRIANGLE_FAN，并需要额外的顶点索引数据来正确地构建三角形扇形。

请注意，这段代码假设你的浏览器支持WebGL，并且在HTML中有一个<canvas>元素。如果不支持WebGL，页面会显示一个警告框。