【零基础学WebGL】绘制矩形

我们先来看一下，最终实现的效果。。。。

效果看起来真的很简单。一句css的事，还写一篇文章？？？

别急着走，往下看，有干货 ！！！

接下来，进入正题，一步步分解在WebGL世界如何绘制一个矩形。

第一步 ：获取WebGL渲染上下文

这里不过多介绍，主要是使用canvas.getContext API，获取webgl上下文。

const createContext = (id: string, width: number, height: number) => { 
  let element: HTMLElement = document.getElementById("id"); 
  if (element && element.tagName !== "canvas") { 
    console.error(`id ${id} element should be a canvas element`); 
    return; 
  } 
 
  let canvas: HTMLCanvasElement; 
  if (!element) { 
    canvas = document.createElement("canvas"); 
    canvas.width = width; 
    canvas.height = height; 
    document.body.appendChild(canvas);