前端实现可绘制的canvas画布_用WebGL绘制一个正方形

如果你对用代码绘图感兴趣，WebGL是最容易入手的一个切入口。一个浏览器、一个编辑器，再略懂一些前端开发的知识，就可以开始绘图了。

使用WebGL把图形渲染到页面中，需要执行如下步骤：

1. 创建一个画布元素；
2. 获取画布的上下文；
3. 初始化视口；
4. 创建一个或多个包含渲染数据的数组(通常是顶点数组)；
5. 创建一个或多个矩阵，将顶点数组变换到屏幕空间中；
6. 创建一个或多个着色器来实现绘制算法；
7. 使用参数初始化着色器
8. 绘制

画布元素与绘制上下文

首先要创建一个canvas元素，获取到canvas的DOM对象后，在使用WebGL的getContext()获取上下文。

创建canvas元素、获取上下文

初始化视口

设置视口，需要将WebGL的上下文和canvas对象作为参数传入，viewport(x,y,width,heigt)方法有四个参数,分别表示：

• x：视口的左下角水平坐标。默认值：0。