原生webgl学习（四） WebGL绘制矩形（一）

最新推荐文章于 2025-06-20 13:29:21 发布

原创

最新推荐文章于 2025-06-20 13:29:21 发布 · 2.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#webgl画矩形 #webgl画三角形 # gl.enableVertexAttribArray #gl.vertexAttribPointer

本文档是原生WebGL系列的第四部分，讲解如何使用WebGL绘制矩形。通过修改上一节的三角形代码，利用两个三角形拼接成矩形。文中提供了修改后的代码示例，演示了如何根据顶点数组长度动态调整绘制参数。虽然这个矩形的颜色不会随位置变化，但在JavaScript中已预设了顶点颜色。接下来的章节将探讨如何用WebGL构建中文简体字，并计划改进代码结构，使其更简洁易用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本专栏所有文章示例代码均可在我的gitee码云上获取，读者可自行下载：https://gitee.com/babyogl/learnWebGL；本节代码在文件夹chapter-02里面的color-triangle-02.html。

上节课笔者绘制了一个颜色随顶点位置变化的三角形，实现平移、旋转和缩放变换的矩阵计算，并提供了一个可供交互的菜单栏工具：原生webgl学习（三） WebGL中的矩阵运算：平移、旋转和缩放；

在前面我们已经画了两次三角形了，这次，改变一些套路，我们画矩形。画矩形的代码跟上一节大同小异，代码解释可以参考上一节：原生webgl学习（三） WebGL中的矩阵运算：平移、旋转和缩放，唯一不同的是顶点坐标发生了改变，利用两个三角形构成一个矩形，只需要将代码中的顶点稍作修改即可：

let positions = [
        -150, -100,
         150, -100,
        -150,  100,
         150, -100,
        -150,  100,
         150,  100
    ];

在画图的时候gl.drawArrays的参数稍作修改即可，由于顶点数组

最低0.47元/天解锁文章

200万优质内容无限畅学