webgl之绘制矩形

 // 顶点着色器
        var vertexSource = '' + 
            'attribute vec4 a_Position;' + 
            // 'attribute vec4 a_PointSize;' + 
            'void main(){' + 
            '   gl_PointSize = 10.0;' + 
            '   gl_Position = a_Position;' + 
            '}';

        // 片元着色器
        var fragmentSource = '' + 
            'void main(){' + 
            '   gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);' + 
            '}';

        var canvas = document.getElementById('canvas')

        var gl = canvas.getContext('webgl')

        // 创建对象
        var vertexShader = gl.createShader(gl.VERTEX_SHADER)
        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)

        // 传入着色器代码
        gl.shaderSource(vertexShader, vertexSource)
        gl.shaderSource(fragmentShader, fragmentSource)

        // 编译着色器
        gl.compileShader(vertexShader)
        gl.compileShader(fragmentShader)

        // 创建着色器程序
        var program = gl.createProgram()
        // 程序绑定着色器对象
        gl.attachShader(program, vertexShader)
        gl.attachShader(program, fragmentShader)

        // 链接程序
        gl.linkProgram(program)
        // 使用程序
        gl.useProgram(program)

        // 顶点位置
        var n = 4

        var vertices = new Float32Array([
            -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5
        ])

        // 创建缓冲区对象
        var vertexBuffer = gl.createBuffer()

        //绑定缓冲区对象
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)

        // 向缓冲区写入数据
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)

        // 拿到着色器中的attribute
        var a_position = gl.getAttribLocation(program, 'a_Position')
        // 用缓冲区的数据(gl.FLOAT) 赋值  a_position
        gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0)
        // a_position变量与对应的 缓冲区对象 建立关联
        gl.enableVertexAttribArray(a_position)

        // 设置绘制区背景
        gl.clearColor(0, 0, 0, 1)
        gl.clear(gl.COLOR_BUFFER_BIT)
        gl.drawArrays(gl.POINTS, 0, 4)
        setTimeout(() => {
            gl.clear(gl.COLOR_BUFFER_BIT)
            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
        }, 5000)