本文主要是介绍8.绘制旗帜（TRIANGLE_FAN），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
愿你出走半生,归来仍是少年
通过TRIANGLE_FAN和四个点绘制出旗帜。
1.知识点
1.1.TRIANGLE_FAN
一系列三角形组成的类似于扇形的图形。第二个三角形是由上一个三角形最后一条表和当前点组成。
2.代码
<script setup lang="ts">import { onMounted, ref } from "vue";import Gl2Utility from "../../Gl/Gl2Utility";import VertexBufferUtility from "../../Gl/VertexBufferUtility";const a_PositionName = "a_Position";onMounted(() => {const gl2 = Gl2Utility.GetGl2("canvas");if (gl2 == null) {console.error("初始化失败！");return;}//顶点着色器源码const vertexShaderSource = `attribute vec4 ${a_PositionName};void main(){//顶点位置，位于坐标原点gl_Position =a_Position;}`;const fragShaderSource = `void main(){//定义片元颜色gl_FragColor = vec4(1.0,0.0,0.0,1.0);}`;const program = Gl2Utility.InitShaders(gl2, vertexShaderSource, fragShaderSource);if (program == null) {return;}//获取参数位置const a_PositionLocation = gl2.getAttribLocation(program, a_PositionName);if (a_PositionLocation < 0) {console.error("获取参数失败！");return;}const count = VertexBufferUtility.InitFloatXY(gl2, program, a_PositionName,[-0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5,]);//设置清除时的背景色gl2.clearColor(0., 0., 0., 1.);//清除gl2.clear(gl2.COLOR_BUFFER_BIT);//绘制点gl2.drawArrays(gl2.TRIANGLE_FAN, 0, count);});</script><template><div class="demo_main"><canvas id="canvas"></canvas></div>
</template><style scoped>#canvas {width: 100%;height: 100%;margin: 0;padding: 0;background-color: blue;}.demo_main {width: 100%;height: 100%;margin: 0;padding: 0;}
</style>
3.效果
这篇关于8.绘制旗帜（TRIANGLE_FAN）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
