Canvas &引用；无法读取属性'；投影'；“未定义”的定义：我的第一个三维几何程序中的webgl错误

我正在看webglfundamentals博客系列和学习动画。根据我的理解，我试图以一种稍微不同的方式进行复制，这样我就不会依赖博客系列的util文件。我无法解决此错误：

Cannot read property 'projection' of undefined
    at createVertices.

var-gl，
着色器程序，
顶点；
initGL（）；
createShaders（）；
创建顶点（）；
函数initGL（）{
var canvas=document.getElementById（“canvas”）；
console.log（canvas）；
gl=canvas.getContext（“webgl”）；
总图视口（0，0，canvas.width，canvas.height）；
gl.clearColor（1,1,1,1）；
}
函数createShaders（）{
var vertexShader=getShader（gl，“3d顶点着色器”）；
var fragmentShader=getShader（gl，“3d片段着色器”）；
shaderProgram=gl.createProgram（）；
gl.attachShader（着色器程序、顶点着色器）；
gl.attachShader（着色器程序、碎片着色器）；
gl.linkProgram（着色器程序）；
}
函数createVertexts（）{
顶点=[
//左列
0,   0,  0,
30,   0,  0,
0, 150,  0,
0, 150,  0,
30,   0,  0,
30, 150,  0,
//上横档
30,   0,  0,
100,   0,  0,
30,  30,  0,
30,  30,  0,
100,   0,  0,
100,  30,  0,
//中间横档
30,  60,  0,
67,  60,  0,
30,  90,  0,
30,  90,  0,
67,  60,  0,
67,  90,  0
];
//创建缓冲区
var buffer=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，BUFFER）；
gl.bufferData（gl.ARRAY\u BUFFER、新Float32Array（顶点）、gl.STATIC\u DRAW）；
函数radToDeg（r）{
返回r*180/Math.PI；
}
功能degToRad（d）{
返回d*Math.PI/180；
}
var转换=[45,150,0]；
var旋转=[degToRad（40）、degToRad（25）、degToRad（325）]；
var标度=[1,1,1]；
var color=[Math.random（），Math.random（），Math.random（），1]；
//查找顶点数据需要去的地方。
var positionLocation=gl.GetAttriblLocation（着色器程序，“a_位置”）；
//查找制服
var colorLocation=gl.getUniformLocation（着色器程序，“u_颜色”）；
var MatrixlLocation=gl.getUniformLocation（着色器程序，“u_矩阵”）；
//webglUtils.resizeCanvasToDisplaySize（总图画布）；
//告诉它使用我们的程序（一对着色器）
gl.useProgram（shaderProgram）；
//启用该属性
gl.EnableVertexAttributeArray（位置位置）；
//创建一个缓冲区来放置位置
var positionBuffer=gl.createBuffer（）；
//将其绑定到ARRAY\u BUFFER（将其视为ARRAY\u BUFFER=positionBuffer）
gl.bindBuffer（gl.ARRAY\u BUFFER，positionBuffer）；
//告诉属性如何从positionBuffer（数组\缓冲区）中获取数据
var size=3；//每次迭代3个组件
var type=gl.FLOAT；//数据为32位浮点
var normalize=false；//不规范化数据
var stride=0；//0=向前移动大小*sizeof（type）每次迭代以获得下一个位置
var offset=0；//从缓冲区的开头开始
gl.VertexAttribute指针(
位置（位置、大小、类型、规格化、步幅、偏移）
//设置颜色
gl.uniform4fv（颜色位置、颜色）；
//计算矩阵
var矩阵=m4.投影（gl.canvas.clientWidth，gl.canvas.clientHeight，400）；
矩阵=m4.平移（矩阵，平移[0]，平移[1]，平移[2]）；
矩阵=m4.x旋转（矩阵，旋转[0]）；
基质=m4.焦酸盐（基质，旋转[1]）；
基质=m4.zRotate（基质，旋转[2]）；
矩阵=m4.标度（矩阵，标度[0]，标度[1]，标度[2]）；
//设定矩阵。
gl.uniformMatrix4fv（矩阵位置，假，矩阵）；
//绘制几何图形。
var primitiveType=gl.TRIANGLES；
var偏移=0；
var count=18；//F中有6个三角形，每个三角形有3个点
总账.DrawArray（原语类型、偏移量、计数）；
}
//m4
变量m4={
投影：功能（宽度、高度、深度）{
//注意：此矩阵翻转Y轴，因此0位于顶部。
返回[
2/宽度，0，0，0，
0，-2/高度，0,0，
0,0,2/深度，0，
-1, 1, 0, 1,
];
},
乘法：函数（a，b）{
var a00=a[0*4+0]；
var a01=a[0*4+1]；
var a02=a[0*4+2]；
var a03=a[0*4+3]；
var a10=a[1*4+0]；
var a11=a[1*4+1]；
var a12=a[1*4+2]；
var a13=a[1*4+3]；
var a20=a[2*4+0]；
var a21=a[2*4+1]；
var a22=a[2*4+2]；
var a23=a[2*4+3]；
var a30=a[3*4+0]；
var a31=a[3*4+1]；
var a32=a[3*4+2]；
var a33=a[3*4+3]；
var b00=b[0*4+0]；
var b01=b[0*4+1]；
var b02=b[0*4+2]；
var b03=b[0*4+3]；
变量b10=b[1*4+0]；
变量b11=b[1*4+1]；
变量b12=b[1*4+2]；
变量b13=b[1*4+3]；
var b20=b[2*4+0]；
var b21=b[2*4+1]；
var b22=b[2*4+2]；
var b23=b[2*4+3]；
var b30=b[3*4+0]；
var b31=b[3*4+1]；
var b32=b[3*4+2]；
var b33=b[3*4+3]；
返回[
b00*a00+b01*a10+b02*a20+b03*a30，
b00*a01+b01*a11+b02*a21+b03*a31，
b00*a02+b01*a12+b02*a22+b03*a32，
b00*a03+b01*a13+b02*a23+b03*a33，
b10*a00+b11*a10+b12*a20+b13*a30，
b10*a01+b11*a11+b12*a21+b13*a31，
b10*a02+b11*a12+b12*a22+b13*a32，
b10*a03+b11*a13+b12*a23+b13*a33，
b20*a00+b21*a10+b22*a20+b23*a30，
b20*a01+b21*a11+b22*a21+b23*a31，
b20*a02+b21*a12+b22*a22+b23*a32，
b20*a03+b21*a13+b22*a23+b23*a33，
b30*a00+b31*a10+b32*a20+b33*a30，
b30*a01+b31*a11+b32*a21+b33*a31，
b30*a02+b31*a12+b
initGL();
createShaders();
createVertices();

gl.drawArrays(primitiveType, offset, count);

var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);