Webgl的概念和示例

文章目录

• Canvas是什么
• 绘制第一个3d图形

Canvas是什么

canvas是透明的，2d坐标系统的x轴(正方向朝右)，y轴(正方向朝下)。

<canvas id="canvas2d" class="m-auto" width="720" height="100"> </canvas>

<script>
  var canvas = document.getElementById("canvas2d") as HTMLCanvasElement;
  if (!canvas) {
    console.log("Failed to retrieve the <canvas> element");
  } else {
    // 获取canvas上下文
    var ctx = canvas.getContext("2d");
    if (ctx) {
      // 设置填充颜色
      ctx.fillStyle = "oklch(0.769 0.188 70.08)";
      // 绘制矩形
      ctx.fillRect(0, 0, 720, 100);
    }
  }
</script>

绘制第一个3d图形

绘制三维图形与二维类似，也遵循类似的步骤，获取canvas元素、获取绘图上下文、开始绘图。

<canvas id="canvas3d" class="m-auto" width="720" height="400"> </canvas>

<script type="module">
  function canvas3D() {
    var canvas = document.getElementById("canvas3d");
    if (!canvas) {
      return console.log("Failed to retrieve the <canvas> element");
    }
    console.dir(canvas);

    // 获取webgl绘图上下文
    var gl = getWebGLContext(canvas);

    if (!gl) {
      console.log("Failed to get the redering context for WebGL");
      return;
    }

    // 指定清空canvas的颜色
    gl.clearColor(0.0, 0.0, 0.0, 1.0);

    // 清空canvas
    gl.clear(gl.COLOR_BUFFER_BIT);
  }
  canvas3D();
</script>

gl.clearColor(red, green, blue, alpha)，指定绘图区域的背景色。

定义	名称	解释
参数	red	指定红色值(从0.0到1.0)
	green	指定绿色值(从0.0到1.0)
	blue	指定蓝色值(从0.0到1.0)
	alpha	指定透明度(从0.0到1.0)

如果任何一个分量小于0.0或者大于1.0，那么就会分别截断为0.0或1.0

一旦指定了背景色之后，背景色就会驻存在WebGL系统(WebGL System)中，在下一次调用gl.clearColor()方法前不会改变。如果将来什么时候你还想用同一个颜色再清空一次绘图区，没必要再指定一次背景色，你可以调用gl.clear()函数，用之前指定的背景色清空(即用背景色填充，擦除已经绘制的内容)绘图区域。