一，webgl 快速入门 1WebGL绘制一个点

原创

已于 2022-06-21 19:04:29 修改 · 286 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

于 2022-06-21 09:21:44 首次发布

本文是WebGL快速入门指南，首先在HTML5页面中创建canvas标签，然后获取WebGL渲染上下文。文章详细介绍了如何设置背景颜色、清空缓冲区，并讲解了着色器的基本概念，包括顶点着色器和片元着色器在绘制点过程中的作用。

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

1.在html5 页面创建canvas 标签

  <!--canvas标签创建一个宽高均为500像素，背景为蓝色的矩形画布-->
    <canvas
      id="webgl"
      width="500"
      height="500"
      style="background-color: blue"
    ></canvas>

2.获取上下文

var gl =canvas.getContext('webgl') ;

说明：
        这里有多个参数可以是 2d,webgl ,webgl2,bitmaprenderer 参数
        "2d", 建立一个 CanvasRenderingContext2D 二维渲染上下文。
        "webgl" (或"experimental-webgl") 这将创建一个 WebGLRenderingContext 三维渲染上下文对象。只在实现WebGL 版本 1(OpenGL ES 2.0) 的浏览器上可用。
        "webgl2" (或 "experimental-webgl2") 这将创建一个 WebGL2RenderingContext 三维渲染上下文对象。只在实现 WebGL 版本 2 (OpenGL ES 3.0) 的浏览器上可用。Experimental
     &n