webgl编程指南 01

一、介绍：

canvas是个好东西，用canvas不但能在网页上画2维的图像，还能画出来3维的图像。

画二维的比较简单了，首先获取绘制对象上下文，然后调上面的各种方法就可以了

//HelloCanvas2d.js
function main() {
    //获取<canvas>标签
    var canvas = document.getElementById("mycanvas");
    //如果没找到<canvas>标签，则输出错误信息
    if (!canvas) {
        console.log('Failed to retrieve the <canvas> element.');
        return;
    }

    //要在<canvas>上绘制图像，须先获取绘图上下文，“2d”代表我们要绘制二维图形。
    var ctx = canvas.getContext("2d");

    //fillstyle：设置或返回用于填充绘画的颜色、渐变或模式；这里我们设置填充颜色为红色。
    ctx.fillStyle = "red";
    /*
     使用填充颜色填充矩形。
     fillRect(x,y,width,height)
     x    矩形左上角的 x 坐标
     y    矩形左上角的 y 坐标
     width        矩形的宽度
     height   矩形的高度
     */
    ctx.fillRect(120, 10, 150, 150);
}

类似的原理，如何画三维的图像呢？

同样使用

var ctx = canvas.getContext("webgl");

来获取三维的webgl绘图上下文，但由于不同的浏览器在调用canvas.getContext()传入的参数可能不，这里在cuon-utils.js中写了一个getWebGLContext()的方法，来兼容不同的浏览器。

具体代码如下：

//HelloCanvas.js
function main(){
    //获取<canvas>元素
    var canvas = document.getElementById('webgl');

    //获取WebGl绘图上下文
    var gl = getWebGLContext(canvas);
    if(!gl)
    {
        console.log('Failed to get the rendering context for WebGL');
        return;
    }

    //指定清空<canvas>的颜色
    gl.clearColor(1.0, 0.0, 0.0, 1.0);//参数(r,g,b,a)，每个分量0~1的取值范围

    //清空<canvas>
    gl.clear(gl.COLOR_BUFFER_BIT);
}

getWebGLContext()的参数要传那个<canvas>元素

现在，三维的webgl程序已将算是建立了，那么怎么样在canvas上画一个三维的点呢？请看下回分解