更新于 

WebGL入门

Canvas是什么？

canvas标签定义了网页上的绘画区域

canvas标签的引用就像这样：
1
2
3
<canvas id="example" width="500" height="500">
对于不支持canvas标签的老式浏览器，会显示这条错误信息
</canvas>>
使用canvas绘制矩形
DrawRectangle绘制结果
DrawRectangle绘制结果
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body onload="main()">
<canvas id="example" width="400" height="400">
    Please use a browser that supports "canvas"
</canvas>
<script src="DrawRectangle.js"></script>
</body>
</html>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
// DrawRecrangle.js
function main(){
    var canvas = document.getElementById('example');
    if(!canvas){
        console.log('Failed to retrieve the <canvas> element')
        return false;
    }
    // get the rendering context for 2DCG
    var ctx = canvas.getContext('2d'); 
    ctx.fillStyle = 'rgba(0,0,255,1.0)'; //set color
    ctx.fillRect(120,10,150,150); //fill a rectangele
}
步骤分解
步骤1 获取canvas元素
1
2
3
4
5
var canvas = document.getElementById('example');
if(!canvas){
    console.log('Failed to retrieve the <canvas> element');
    return false;
}
步骤2 向该元素请求二维/三维图形的“绘图上下文”
1
var ctx = canvas.getContext('2d');
上下文 context

getContext() 的参数用于指定上下文类型，
有两种类型：

  • 二维
  • 三维
步骤3 在绘图上下文调用相应绘图函数
1
2
ctx.fillStyle = 'rgba(0,0,255,1.0)';
ctx.fillRect(120,10,150,150);
canvas的坐标系统
  • x轴 坐标系横轴，正方向朝→
  • y轴 坐标系纵轴，正方向朝↓
  • 原点 落在左上方
fillRect的参数
  • param1 矩形左上顶点x坐标
  • param2 矩形左上顶点y坐标
  • param3 矩形宽度
  • param4 矩形高度

最短的WebGL程序：清空绘图区

HelloCanvas code
清空绘图区效果
清空绘图区效果
1
2
3
4
5
6
7
8
9
<body onload="main()">
  <canvas id="webgl" width="400" height="400">
    Come on! Why you still use your grammy's browser?
  </canvas>
  <script src="../examples/lib/webgl-utils.js"></script>
  <script src="../examples/lib/webgl-utils.js"></script>
  <script src="../examples/lib/cuon-utils.js"></script>
  <script src="./HelloCanvas.js"></script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function main() {
  // 获取<canvas>元素
  var canvas = document.getElementById('webgl');
  
  // 获取WebGL绘图上下文
  var gl = getWebGLContext(canvas);
  if (!gl) {
    console.log("Congratulate! You meet a bug!")
    return;
  }

  // 指定清空<canvas>颜色
  gl.clearColor(0.0, 0.0, 0.0, 1.0);

  // 清空<canvas>
  gl.clear(gl.COLOR_BUFFER_BIT);
}
步骤分解
1. 获取canvas元素
1
let canvas = document.getElementById('webgl');
2. 获取WebGL绘图上下文
getContext 和 getWebGLContext

getContext
接收的参数（’2d’/‘3d’’）在不同的浏览器中不同。

1
let gl = canvas.getContext('2d');

getWebGLContext
在引入的cuon-utils.js中，
用于隐藏不同浏览器之间的差异。

1
let gl = getWebGLContext(canvas);
上下文命名技巧

之所以有人习惯将绘图上下文命名为gl，
是因为 WebGL 是基于 OpenGL ES 的，
这样可以将两者的函数名对应起来，比如：
gl.clearColor() 与 glClearColor()

3. 设置背景色
1
gl.clearColor(0.0, 0.0, 0.0, 1.0);

颜色分量取值继承自OpenGL，因此范围在0.0-1.0，RGB颜色越高就越亮。

4. 清空canvas
1
gl.clear(gl.COLOR_BUFFER_BIT);
BUFFER

由于clear继承自OpenGL，基于多基本缓冲区模型，比二维绘图上下文要复杂。
清空绘图区域，实际上是清空颜色缓冲区（color buffer）。

也可以通过下面方法清空对应缓冲区：