WebGL快速入门——坐标系统&创建canvas画布

taptap2024-01-23 10:16

1、坐标系统

我们如果学过canvas2D绘图后，都知道canvas的坐标系以及canvas2D绘制的图形，对于复杂的三维物体，canvas2D显然不能满足需求，那就需要今天的主角------webgl，webgl提供了丰富的API，可以绘制各种各样复杂的三维立体效果，主要用于网页端三维可视化开发。与二维的canvas画布不同，webgl的坐标系的原点位于canvas中心，坐标系统有三个分量，分别是x轴，y轴和z轴，具体的不同，直接上图

canvas二维坐标系

webgl坐标系

2、canvas画布

步骤

创建canvas画布没有什么变化，还是两个步骤

1、获取canvas元素

dart 复制代码

// 获取canvas元素
const  canvas = document.querySelector("canvas")

2、获取上下文

arduino 复制代码

// 获取上下文
const gl = canvas.getContext("webgl")

3、设置画布背景颜色

gl.clearColor()方法用于设置清空颜色缓冲时的颜色值，这里我认为通俗的说就是设置canvas画布的背景颜色

scss 复制代码

// 设置背景颜色(r,g,b,a) 参数要求为浮点数
// gl.clearColor(red, green, blue, alpha)
gl.clearColor(1.0,0.0,0.0,1.0)

4、清屏

scss 复制代码

// 清屏
gl.clear(gl.COLOR_BUFFER_BIT);

示例

创建一个400×400像素大小的canvas画布，居中显示并设置背景为红色

代码

xml 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>基础模板</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        overflow: hidden;
      }
      canvas {
        display: block;
        width: 400px;
        height: 400px;
        margin: 0 auto;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <canvas></canvas>
    <script>
      // 获取canvas
      const canvas = document.querySelector("canvas");
      // 获取上下文
      const gl = canvas.getContext("webgl");
      // 设置canvas画布颜色
      gl.clearColor(0.0, 0.0, 0.0, 1.0);
      // 清屏
      gl.clear(gl.COLOR_BUFFER_BIT);
    </script>
  </body>
</html>

总结： 对于canvas画布的初始化记住以上几个步骤就可以了，对于步骤3和步骤4不理解也没关系，先记住这几个步骤。

写在最后：作者技术水平有限，如文章有误，请指出，谢谢~