还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。
No.内容链接1Openlayers 【入门教程】 - 【源代码+示例300+】 2Leaflet 【入门教程】 - 【源代码+图文示例 150+】 3Cesium 【入门教程】 - 【源代码+图文示例200+】 4MapboxGL【入门教程】 - 【源代码+图文示例150+】 5前端就业宝典 【面试题+详细答案 1000+】
文章目录
使用WebGL绘制正五边形涉及到定义五边形的顶点坐标，并使用这些坐标来渲染形状。以下是使用WebGL绘制正五边形的示例代码：
<!DOCTYPEhtml><html><head><title>WebGL Pentagon</title><style>body{margin: 0;}canvas{width: 100%;height: 100%;}</style></head><body><canvasid="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,newFloat32Array(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);
}
`;// 创建并编译着色器functioncreateShader(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，页面会显示一个警告框。
本文转载自: https://blog.csdn.net/cuclife/article/details/139603456
版权归原作者 还是大剑师兰特 所有， 如有侵权，请联系我们删除。
版权归原作者 还是大剑师兰特 所有， 如有侵权，请联系我们删除。