本文是WebGL初学系列的第二篇，主要介绍如何创建WebGL上下文并绘制一个三角形。首先通过HTML5 Canvas元素获取WebGL渲染环境，接着编写顶点着色器，并使用WebGL API进行绘制工作。示例代码中展示了获取上下文环境和绘制三角形的基本步骤。
开始WebGL程序之前，还是得进行一些理论上的知识，不然会让自己的代码写得不明不白。上一篇文章就是写得关于WebGL的一些基础知识http://nbcoders.com/detail/156
第一：首先获取WebGL上下文。
第二：编写顶点着色器
第三：开始一些自己的绘制工作（调用WebGL API）
这里我们就以画一个三角形为例子，开始我们的WegGL程序吧。
首先获取WebGL的上下文环境，也就是渲染环境，我们要利用HTML5的canvas元素。所以我们这里要新建一个Canvas元素，这里canvas可以对应一个WebGL的渲染环境，也可以对应一个canvas-2d的渲染环境。编写如下代码：
<html>
<body>
<canvas id="webglCanvas" style="border:1px solid blue;" width='600px' height='600px'></canvas>
</body>
</html>
可以简单运行试试效果，有个蓝色的细框。接下来我们要获取WebGL的渲染区域，然后操作WebGL渲染区域。这里通过canvas的getContext方法获取WebGL的上下文环境。
var webglContext = document.getElementById().getContex("experimental-webgl");
这里完整代码如下：
function initCanvas(canvasId) {
var canvas = document.getElementById(canvasId);
var context = null;
try{
context = canvas.getContext("experimental-webgl");
最低0.47元/天 解锁文章
265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
