WebGL学习笔记之认识WebGL上下文

在之前的文章《WebGL学习笔记之使用Canvas》中介绍了使用WebGL的载体标签Canvas，不过绘制的还是Canvas，而不是WebGL。本文将介绍写一个最简单的WebGL程序。直接上Demo

直接上Demo

  const canvas = document.querySelector('#webgl');
  const gl = canvas.getContext('webgl');

  if (gl) {
    gl.clearColor(0, 1, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);
  } else {
    console.log('WebGL not supported');
  }

代码解释

1. 获取Canvas标签
2. 告诉Canvas，老子要用WebGL
3. 设置一个clearColor（相当于刷子蘸点这个颜色的颜料）
4. 刷！（COLOR_BUFFER_BIT，就是第三步设置的颜色放在这个变量里了）

全部代码：https://github.com/sailor103/LearningWebGL/blob/master/src/2-webgl-context/index.html

运行效果如图：

WebGL上下文

是不是很简单？通过这个Demo我们可以发现Canvas的另一面，他不仅仅可以绘制普通的2D图形，还隐藏着一个大招：WebGL。

PS：注意不同浏览器初始化这个webgl的环境写法可能有点区别，但学习原理的时候不必关注这个，本文的代码在Chrome下完美运行，建议您也用它。

Web 3D GIS 之WebGL全部教程

全部文章见这里：新手的 Web 3D GIS 学习笔记之WebGL篇