原生webgl学习（六） WebGL写简单的汉字（一）

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

原创

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

3 ·

CC 4.0 BY-SA版权

文章标签：

#WebGL写文本 #WebGL绘制矩形 #WebGL写字

本文介绍如何使用WebGL绘制汉字，以'王'字为例，通过绘制多个矩形组合成汉字。首先，讲解了着色器的使用，接着初始化数据，包括平移、旋转、缩放等参数。接着建立菜单栏和绘制函数，实现交互控制。最后展示了程序的实现效果，并预告将探讨如何绘制多个汉字并进行动态操作。

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

本专栏所有文章示例代码均可在我的gitee码云上获取，读者可自行下载：https://gitee.com/babyogl/learnWebGL；本文demo代码在chapter-03下的draw-word-01.html，读者可以自行下载查看；

如果读者还对本专栏的文章内容和编程方式还不是很了解，建议先对前面的文章进行学习：博客专栏：webgl基础学习。前面的几节课，笔者为大家演示了WebGL如何绘制三角形和矩形，也说过绘制这些图案当然不是无聊绘制着玩的，这节课我们就利用绘制多个三角形和矩形，然后来组成我们的一些简单的汉字。下面我们先来看一张图

这个“王”字（ps:会不会令你想起隔壁老王？哈哈），总共有四笔，我们可以用四个矩形来组成它，分别用16个顶点，以第一横为例，要画两个三角形，画图时顶点的顺序组合为：（v0，v1, v2），（v2,v1,v3），其实不只这种顺序组合，读者可以自行探索其他的组合。其他的笔画也按照这个顺序来，最终经过绘制后，就会有一个王字清晰地呈现在我们面前，像前面的文章一样，给其加一个交互菜单栏工具，用于控制其位置的平移、旋转缩放。不同的是，这一次的旋转，我们利用更加有逼格的形式实现。

着色器

来看一下着色器：

<script id="v-shader" type="x-shader/x-vertex">
        attribute vec2 a_position;
        uniform vec2 u_resolution;//分辨率
        uniform vec2 u_translate;//平移
        uniform vec2 u_rotate;//旋转
        uniform vec2 u_scale;//缩放
        varying vec4 v_color;
        void main()
        {
          vec2 sPosition = a_position * u_scale;
          vec2 rotatePosition = vec2(
              sPosition.x * u_rotate.y + sPosition.y * u_rotate.x,
              sPosition.y * u_rotate.y - sPosition.x * u_rotate.x);
          vec2 po