SOURCE

///顶点着色皮
    let vertexShaderSource = `
        //浮点数设置为中等精度
		precision mediump float;
		//接收 JavaScript 传递过来的点的坐标（X, Y）
		attribute vec2 a_Position;
		// 接收canvas的尺寸。
		attribute vec2 a_Screen_Size;
		attribute vec4 a_Color;
		varying vec4 v_Color;
		void main(){
			// 将 canvas 的坐标值 转换为 [-1.0, 1.0]的范围。
			vec2 position = (a_Position / a_Screen_Size) * 2.0 - 1.0;
			// canvas的 Y 轴坐标方向和 设备坐标系的相反。
			position = position * vec2(1.0, -1.0);
			// 最终的顶点坐标。
			gl_Position = vec4(position, 0.0, 1.0);
			v_Color = a_Color;
		}
    `
    //片元着色器
    let fragmentShaderSource = `
         //设置浮点数精度为中等。
        precision mediump float;
        //接收 JavaScript 传过来的颜色值（rgba）。
        varying vec4 v_Color;
        void main(){
          vec4 color = v_Color / vec4(255, 255, 255, 1);
          //vec4 color = v_Color ;
          gl_FragColor = color;
       }
    `
    let canvas = document.getElementById('canvas');
 
    //canvas.width = window.innerWidth;
    //canvas.height = window.innerHeight;
 
    let gl = canvas.getContext('webgl');
 
    //创建顶点着色器
    let vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader,vertexShaderSource);
    gl.compileShader(vertexShader);
    //创建片元着色器
    let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader,fragmentShaderSource);
    gl.compileShader(fragmentShader);
 
 
 
 
    //创建一个完成的着色器
    let program = gl.createProgram();
    gl.attachShader(program,vertexShader);
    gl.attachShader(program,fragmentShader);
    gl.linkProgram(program);
    gl.useProgram(program);
 
 
    //读取相关的变量
    let a_Position = gl.getAttribLocation(program,'a_Position');
    let a_Color = gl.getAttribLocation(program,'a_Color');
    //绑定相关变量 之后我们是对这两个在缓冲区进行操作的
    gl.enableVertexAttribArray(a_Color);
    gl.enableVertexAttribArray(a_Position);
    //处理顶点着色器中的变量
    let a_Screen_Size = gl.getAttribLocation(program,'a_Screen_Size');//取到屏幕的大小
    //console.log(canvas.width,canvas.height);
    gl.vertexAttrib2f(a_Screen_Size,canvas.width,canvas.height);//设置参数
 
    //---处理创建缓冲区，并设置从缓冲区中数据读取规则
    let positionBuffer = gl.createBuffer();//创建一个position的缓冲区
    gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);//绑定缓冲区
 
    //这是positionBuffer的读取规则
    let size = 2;//一次性读取两位数
    let type = gl.FLOAT;//设置读取取出来之后的数据格式
    let normalize = false;//向量
    let stride = 0;//
    let offset = 0;
    gl.vertexAttribPointer(a_Position,size,type,normalize,stride,offset);
 
 
    // 创建 颜色信息 buffer
    let colorBuffer = gl.createBuffer();
    // 将当前 buffer 设置为 postionBuffer，接下来对 buffer 的操作都是针对 positionBuffer 了。
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
 
    // 设置 a_Position 变量读取 positionBuffer 缓冲区的方式。
    let size1 = 4;
    let type1 = gl.FLOAT;
    let normalize1 = false;
    let stride1 = 0;
    let offset1 = 0;
    gl.vertexAttribPointer(a_Color, size1, type1, normalize1, stride1, offset1);
    let positions = [];
    let colors = [];
    this.render(gl);
 
    //const _colors = [{r:255,g:1,b:1,a:1}, {r:1,g:255,b:1,a:1}, {r:1,g:1,b:255,a:1}];
 
    canvas.addEventListener('click', evt => {
        let x = evt.pageX;
        let y = evt.pageY;
        positions.push(x,y);
        let color = randomColor();

        colors.push(color.r,color.g,color.b,color.a)
        if(positions.length % 6 == 0){
            gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);//绑定使用当前的缓冲区
            gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(positions),gl.DYNAMIC_DRAW);//将数据放进去
            gl.bindBuffer(gl.ARRAY_BUFFER,colorBuffer);//绑定使用颜色缓冲区
            gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(colors),gl.DYNAMIC_DRAW);//将数据放入缓冲区中
            this.render(gl);
        }
 
    });

    function  render(gl) {
        gl.clearColor(0,0,0,1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        if (positions.length <= 0) {
            return;
        }
        gl.drawArrays(gl.TRIANGLES,0,positions.length/2);
 
    }
 
    //随机取到相关的颜色
    function randomColor() {
        return {
            r: Math.random() * 255,
            g: Math.random() * 255,
            b: Math.random() * 255,
            a: 1
        };
    }

<canvas id="canvas" width="500" height="300"></canvas>

body{
    margin: 0 0;
  
}