通常我们将 CANVAS 与 webGL 区分开 ， 移动端和WEB端区分开
类似于这种关系:
// 通过getElementById()方法获取canvas画布 var c2dx=document.getElementById(‘c2dx‘); // 通过方法getContext()获取2d上下文 var c=c2dx.getContext(‘2d‘); c.moveTo(0,0); //直线起点坐标 c.lineTo(50,50); //直线第2个点坐标 c.lineTo(0,100); //直线第3个点坐标 c.stroke(); //把点连成直线绘制出来 //-------------------------------------------------------------------- // 通过getElementById()方法获取canvas画布 var wglx=document.getElementById(‘webglxxx‘); // 通过方法getContext()获取WebGL上下文 var gl=wglx.getContext(‘webgl‘); console.log(gl);
let [canvas, webgl, opengl] = [‘2d’, ‘web端’, ‘移动端‘]
因为 webgl 通常用GPU的库来处理3D和加速， 所以定义会稍显专业， 但总共分四步骤：
点、线面 、 着色 、绘制。
1、let 3d基础 = [‘顶点位置‘， ‘面颜色定义‘]
2、初始化着色器 ， 主要是创建点，创建面， 再引入点和面计算光源阴影，编译并渲染出来
3、创建场景并把 渲染的物体 关联到 具体场景，返回整体参数。
4、调用绘制方法进行绘制。
原文：https://www.cnblogs.com/xred/p/14673186.html