WebGL实例（003）： 绘制矩形

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；优快云知名博主，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+】

一、示例图片

---

二、示例代码

/*
* @Author: 还是大剑师兰特（优快云）
* @下面源代码版权归还是大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @First published in 优快云
* @First published time: 2025-11-28
*/
<template>
  <div class="webgl-container">
    <h3>WebGL绘制矩形线框</h3>
    <canvas 
      ref="glCanvas" 
      width="1000" 
      height="600"
      class="webgl-canvas"
    ></canvas>
  </div>
</template>

<script>
export default {
  name: 'WebGLRectangle',
  data() {
    return {
      gl: null,
      program: null
    }
  },
  mounted() {