SOURCE

function initShaders(gl, vshader, fshader) {
    var program = createProgram(gl, vshader, fshader);
    if (!program) {
        console.log('Failed to create program');
        return false;
    }

    gl.useProgram(program);
    gl.program = program;

    return true;
}
function createProgram(gl, vshader, fshader) {
    // Create shader object
    var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader);
    var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader);
    if (!vertexShader || !fragmentShader) {
        return null;
    }

    // Create a program object
    var program = gl.createProgram();
    if (!program) {
        return null;
    }

    // Attach the shader objects
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);

    // Link the program object
    gl.linkProgram(program);

    // Check the result of linking
    var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
    if (!linked) {
        var error = gl.getProgramInfoLog(program);
        console.log('Failed to link program: ' + error);
        gl.deleteProgram(program);
        gl.deleteShader(fragmentShader);
        gl.deleteShader(vertexShader);
        return null;
    }
    return program;
}
function loadShader(gl, type, source) {
    // Create shader object
    var shader = gl.createShader(type);
    if (shader == null) {
        console.log('unable to create shader');
        return null;
    }

    // Set the shader program
    gl.shaderSource(shader, source);

    // Compile the shader
    gl.compileShader(shader);

    // Check the result of compilation
    var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
    if (!compiled) {
        var error = gl.getShaderInfoLog(shader);
        console.log('Failed to compile shader: ' + error);
        gl.deleteShader(shader);
        return null;
    }

    return shader;
}

function getPointsBak(center, radius, startAngle, endAngle,pointNum) {
    var sin;
    var cos;
    var x;
    var y;
    var angle;
    var points = new Array();
    points.push(center);
    for (var i = 0; i <= pointNum; i++) {
        angle = startAngle + (endAngle - startAngle) * i / pointNum;
        sin = Math.sin(angle * Math.PI / 180);
        cos = Math.cos(angle * Math.PI / 180);
        x = center[0] + radius * sin;
        y = center[1] + radius * cos;
        points[i] = [x, y];
    }
    var point = points;
    //point.push(center);
    return point;
}

function getPoints(center, radius, startAngle, endAngle,pointNum) {
    var sin;
    var cos;
    var x;
    var y;
    var angle;
    var points = new Array();
    points.push(center);
    for (var i = 0; i <= pointNum*10; i++) {
        angle = startAngle + (endAngle - startAngle) * i / pointNum;
        sin = Math.sin(angle * Math.PI / 180);
        cos = Math.cos(angle * Math.PI / 180);
        x = center[0] + radius * i / pointNum * sin / 10;
        y = center[1] + radius * i / pointNum* cos / 10;;
        points.push(x);
        points.push(y);
    }
    var point = points;
    //point.push(center);
    return point;
}
// 调整canvas大小的函数
function resizeCanvas() {
    canvas.width = canvas.clientWidth;
    canvas.height = canvas.clientHeight;
}

const canvas = document.getElementById('container');

 
// 初始化时调整大小
resizeCanvas();
//const gl = canvas.getContext("webgl");
const gl = canvas.getContext("experimental-webgl");
var vertexShaderSource = `
attribute vec4 a_Position;
void main() {
gl_Position = a_Position;
gl_PointSize = 1.0;
}
`;
var fragmentShaderSource = `
precision highp float;
void main() {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
`;
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
initShaders(gl, vertexShaderSource, fragmentShaderSource);
const pos = gl.getAttribLocation(gl.program, 'a_Position');

let dataArray = getPoints([0,0], 1.0, 0, 360, 100);
let data = new Float32Array(dataArray);
// 创建缓冲区对象
let buffer = gl.createBuffer();
// 绑定缓冲区对象
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
// 向缓冲区对象中写入数据
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
// 将缓冲区对象分配给a_Position变量
gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
// 启用变量
gl.enableVertexAttribArray(pos);
// 绘制三角形
//gl.drawArrays(gl.TRIANGLES, 0, 3);
//gl.drawArrays(gl.TRIANGLES, 0, 3);
gl.drawArrays(gl.LINE_LOOP, 0, dataArray.length);
let g_points = [];
let current = 0;
const test = function (ev) {
    //let x = ev.clientX;
    //let y = ev.clientY;
    //console.log({ x, y });
    //let data = new Float32Array(dataArray);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
    //gl.drawArrays(gl.LINE_LOOP, 0, dataArray.length);
    gl.drawArrays(gl.POINTS, 0, current++);
    if (current >= dataArray.length) {
        current = 0;
    }
}
 
// 监听窗口大小变化事件
window.addEventListener('resize', resizeCanvas);

canvas.onmousedown = test;
setInterval(() => {
    test();
}, 1)

<canvas id="container">No canvas</canvas>

html,body{border:none;padding:0;margin:0;}
#container {position:absolute;width:100%;height:100%;}