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

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不理解也没关系,先记住这几个步骤。

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

相关推荐
平行云2 天前
赋能数字孪生:Paraverse平行云实时云渲染平台LarkXR,提供强大的API与SDK用于二次开发和深度集成
3d·unity·ue5·webgl·实时云渲染·云xr
刘皇叔code7 天前
记一次用Three.js展示360°全景图的折腾
webgl·three.js
xhload3d13 天前
场景切换 × 流畅过渡动画实现方案 | 图扑软件
物联网·3d·智慧城市·html5·动画·webgl·数字孪生·可视化·虚拟现实·工业互联网·工控·工业·2d·轻量化·过渡动画
iloveas201417 天前
three.js+WebGL踩坑经验合集(8.3):合理设置camera.near和camera.far缓解实际场景中的z-fighting叠面问题
webgl
失忆爆表症19 天前
基于 MediaPipe + Three.js 的实时姿态可视化前端
前端·webgl
串串狗xk20 天前
使用 webgl 写的新概念笔记应用《赛博城寨》,在三维开放世界里写笔记
javascript·webgl
刘皇叔code22 天前
Three.js后处理UnrealBloomPass的分析
webgl·three.js
掘金安东尼24 天前
用 WebGL + Solid.js 构建混合材质 Shader
前端·webgl
郝学胜-神的一滴1 个月前
Three.js 材质系统深度解析
javascript·3d·游戏引擎·webgl·材质
Tetap1 个月前
pixijs实现绿幕抠图和视频
前端·webgl