canvas 与 webGL , openGL
2021-05-30 13:01
标签:rgba span let 移动 ntb bsp stroke var tco 通常我们将 CANVAS 与 webGL 区分开 , 移动端和WEB端区分开 类似于这种关系: let [canvas, webgl, opengl] = [‘2d’, ‘web端’, ‘移动端‘] 因为 webgl 通常用GPU的库来处理3D和加速, 所以定义会稍显专业, 但总共分四步骤: 点、线面 、 着色 、绘制。 1、let 3d基础 = [‘顶点位置‘, ‘面颜色定义‘] 2、初始化着色器 , 主要是创建点,创建面, 再引入点和面计算光源阴影,编译并渲染出来 3、创建场景并把 渲染的物体 关联到 具体场景,返回整体参数。 4、调用绘制方法进行绘制。 canvas 与 webGL , openGL 标签:rgba span let 移动 ntb bsp stroke var tco 原文地址:https://www.cnblogs.com/xred/p/14673186.html // 通过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);