案例查看地址：点击这里
相对于平移来说，WebGL的选择就复杂一些，能够旋转，首先你要指明：
1.旋转轴：你要指明通过哪个轴进行旋转
2.旋转方向：逆时针还是顺时针旋转
3.旋转的角度
如下图这种，逆时针选择通过z轴旋转，为正旋转。那我们怎么通过这些所知的内容，求出旋转后的顶点的坐标呢？
1.首选求出p点和x相交的角度a，旋转后两个点距离旋转轴原点距离都是相同的，所以r可以确定。
2.得知a的度数以后，就能得到旋转后的p'点和x轴的角度。
3.然后再通过三角函数计算出旋转后的p'点的x坐标和y坐标。
首先通过：
推理出来：
cos a = x/r;
sin a = y/r;
cos(a+b) = x'/r;
sin(a+b) = y'/r;
换个角度：
r = x/cos a;
r = y/sin a;
x' = r*cos(a+b);
y' = r*sin(a+b);
然后通过：
得到：
x' = r*(cos a * cos b - sin a * sin b);
y' = r*(sin a * cos b + cos a * sin b);
x' = r*cos a * cos b - r*sin a * sin b;
y' = r*sin a*cos b + r*cos a * sin b;
x' = x * cos b - y * sin b;
y' = y * cos b + x * sin b;
所以：通过公式，我们只要求出sin b和cos b，就能得到旋转后的x坐标和y坐标。
这一块的内容由于老长时间没学了，本人也忘的差不多了，算了，就写成这样吧，你们如果还不懂，就找到高中的课本。。。
由于正方形不好看效果，所以就改为了用三角形实现
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body onload="main()">
<canvas id="canvas" height="400" width="400">
你的浏览器不支持WebGL，请更换新的浏览器
</canvas>
</body>
<script src="lib/webgl-utils.js" ></script>
<script src="lib/webgl-debug.js" ></script>
<script src="lib/cuon-utils.js" ></script>
<script>
//顶点着色器程序
var VSHADER_SOURCE="" +
"attribute vec4 a_Position;\n" +
"uniform float u_SinB,u_CosB;\n" +//声明存储sin b 和 cos b 的浮点数变量
"void main(){\n" +
" gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB;\n" +//换算出x点的坐标
" gl_Position.y = a_Position.x * u_SinB + a_Position.y * u_CosB;\n" +//换算出y点的坐标
" gl_Position.z = a_Position.z;\n" +//设置z坐标
" gl_Position.w = 1.0;\n" +
"}\n";
//片元着色器程序
var FSHADER_SOURCE = "" +
"void main(){\n" +
" gl_FragColor = vec4(0.0,1.0,0.0,1.0);\n" +//设置颜色
"}\n";
//设置旋转的角度
var angle = 60.0;
function main() {
//首先获取到canvas的dom对象
var canvas = document.getElementById("canvas");
//获取到WebGL的上下文
var gl = getWebGLContext(canvas);
//不支持WebGL的浏览器将打印一个错误，并结束代码运行
if (!gl) {
console.log("浏览器不支持WebGL");
return;
}
//初始化着色器
if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){
console.log("初始化着色器失败");
return;
}
//设置顶点位置
var n = initVertexBuffers(gl);
if(n < 0){
console.log("无法获取顶点相关的信息");
return;
}
//计算出sin b和cos b 的值
var radin = Math.PI * angle/180.0;//转为弧度制
var cosB = Math.cos(radin);//计算出cos b
var sinB = Math.sin(radin);//计算出sin b
//获取uniform变量的存储位置
var u_SinB = gl.getUniformLocation(gl.program,"u_SinB");
var u_CosB = gl.getUniformLocation(gl.program,"u_CosB");
if(u_CosB < 0 || u_SinB < 0){
console.log("无法获取变量的存储位置");
return;
}
//给uniform变量赋值
gl.uniform1f(u_SinB,sinB);
gl.uniform1f(u_CosB,cosB);
//指定一个覆盖（清空）canvas的颜色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
//清除canvas
gl.clear(gl.COLOR_BUFFER_BIT);
//将三个点绘制出来
gl.drawArrays(gl.TRIANGLES,0,n);
}
function initVertexBuffers(gl) {
var vertices = new Float32Array([0.0,0.5,-0.5,-0.5,0.5,-0.5]);
var n = 3; //绘制点的个数
//创建缓冲区对象
var vertexBuffer = gl.createBuffer();
if(!vertexBuffer){
console.log("创建缓冲区对象失败");
return -1;
}
//将缓冲区对象绑定到目标
gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
//向缓冲区对象中写入数据
gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);
//获取attribute变量的存储位置
var a_Position = gl.getAttribLocation(gl.program, "a_Position");
if(a_Position < 0){
console.log("无法获取变量的存储位置");
return;
}
//将缓冲区对象分配给a_Position变量
gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,0,0);
//链接a_Position变量与分配给它的缓冲区对象
gl.enableVertexAttribArray(a_Position);
return n;
}
</script>
</html>
上面的代码实现了图形的旋转。
缩放：
图形的缩放就简单的多多了，为什么？
我们在设置顶点着色器的时候，是不是有一个gl_Position.w得值，在之前介绍顶点着色器的时候，介绍过第四个值得作用，就是实际点的位置都是除以w以后的值。
默认都是1.0，就是不缩小也不放大，如果要放大一倍呢，那就把这个值设置成0.5好了。
效果呢，就会变成下面的：
个人感觉，还是缩放简单啊，下一节，我们将会将到矩阵，现在我反正还看不懂。