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

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

相关推荐
Data_Adventure2 小时前
推荐几款开源 Canvas 和 WebGL 图形库
前端·webgl·canvas
康康的幸福生活2 天前
webgl2 方法解析: bufferData()
webgl
xhload3d2 天前
智慧航天运载体系全生命周期监测 | 图扑数字孪生
物联网·3d·智慧城市·html5·webgl·数字孪生·可视化·工业互联网·三维建模·工控·航空航天·火箭升空·智慧航空·智慧航天·火箭发射·火箭回收
魂断蓝桥6662 天前
使用three.js,实现微信3D小游戏系列教程,框架篇(一)
webgl·threejs·微信小游戏·3d建筑·three.js路径规划、三维a*算法、javascript三维导航,·three.js小游戏
三维搬砖者3 天前
基于 Three.js 开发三维引擎-01点类:从原理到实践
webgl·three.js
魂断蓝桥6664 天前
如何基于three.js(webgl)引擎架构,实现3D微信小游戏(第一课)
webgl·three.js·微信小游戏·three.js路径规划、三维a*算法、javascript三维导航,·three.js小游戏
康康的幸福生活4 天前
webgl2 方法解析: getContext()
webgl
庖丁解牛5 天前
3. Babylonjs 中获取相机方向相关
前端·webgl·游戏开发
康康的幸福生活5 天前
webgl2 方法解析: createBuffer()
前端·javascript·webgl
康康的幸福生活6 天前
webgl2 方法解析: shaderSource()
webgl