Question

创建一个Canvas画布，用于显示WebGL的渲染结果，canvas元素和div等元素一样是HTML的一个元素，只是Canvas画布具有2D和3D绘图功能。

<!--canvas标签创建一个宽高均为500像素，背景为蓝色的矩形画布-->
<canvas id="webgl" width="500" height="500" style="background-color: blue"></canvas>

通过JavaScript获取上面创建的Canvas元素返回一个Canvas对象。

//通过getElementById()方法获取canvas画布对象
var canvas= document.getElementById('webgl')

canvas对象也可以不通过<canvas>标签创建，然后id方式获取，也可以通过DOM直接创建

//通过getElementById()方法获取canvas画布对象
var canvas = document.createElement('canvas');

Canvas对象方法.getContext()

HTML的Canvas元素提供了2D和3D绘图两种功能，平时程序员之间交流所说的Canvas一词就是指Canvas的2D绘图功能，通过Canvas元素实现的3D绘图功能，也就是所谓的WebGL，或者说WebGL依赖于Canvas元素实现。

执行canvas.getContext('2d')返回对象具有一系列绘制二维图形的方法，比如绘制直线、圆弧等API。关于canvas 2D绘图相关内容，本课程不介绍，可以百度关键词Canvas，

//通过方法getContext()获取Canvas 2D绘图上下文
var gl=canvas.getContext('2d');
c.moveTo(0,0);//直线起点坐标
c.lineTo(50,50);//直线第2个点坐标
c.lineTo(0,100);//直线第3个点坐标
c.stroke();//把点连成直线绘制出来

执行canvas.getContext('webgl');返回对象具有一系列绘制渲染三维场景的方法，也就是WebGL API。

//通过方法getContext()获取WebGL上下文
var gl=canvas.getContext('webgl');
...
//调用WebGL API绘制渲染方法drawArrays
gl.drawArrays(gl.POINTS,0,1);
...