示例3：绘制点

作者: WebGiser | 来源:发表于2021-06-28 10:53 被阅读0次

示例3：绘制点
R-ggplot2-如何绘制散点密度图并把图例放图里？
示例4：鼠标动态绘制点
WebGL 3D（绘制点）
OpenGL-ES 学习示例
R语言绘制waffle chart
R-ggplot2-Barplot时如何将stack和dodge
ggpubr包系列学习教程(四)
了解CATransform3D，请看这里
d3的基础图表封装示例

效果

image.png

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        
        </style>
    </head>
    <body>
        <canvas id="canvas" width="600" height="600" style="border: 1px solid #ff0000;"></canvas>
        
        <script>
            let canvas = document.getElementById('canvas');
            let gl = canvas.getContext('webgl');
            
            // 顶点着色器
            let VSHADER_SOURCE = 
            "attribute vec4 a_Position;\n"+
            "void main(){\n"+
                "gl_Position = a_Position;\n"+
                "gl_PointSize = 10.0;\n"+
            "}\n";
            
            // 片元着色器
            let FSHADER_SOURCE = 
            "void main(){\n"+
                "gl_FragColor = vec4(1.0, 0.0 ,0.0, 1.0);\n"+
            "}\n";
            
            
            // 初始化着色器
            function initShaders(gl, vSource, fSource){
                let vShader = gl.createShader(gl.VERTEX_SHADER);
                gl.shaderSource(vShader, vSource);
                gl.compileShader(vShader);
                
                let fShader = gl.createShader(gl.FRAGMENT_SHADER);
                gl.shaderSource(fShader, fSource);
                gl.compileShader(fShader);
                
                let program = gl.createProgram();
                gl.attachShader(program, vShader);
                gl.attachShader(program, fShader);
                gl.linkProgram(program);
                gl.useProgram(program);
                gl.program = program;
            }
            
            initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE);
            
            let a_Position = gl.getAttribLocation(gl.program, 'a_Position');
            gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);
            
            
            gl.clearColor(0.0, 0.0, 0.0, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);
            
            gl.drawArrays(gl.POINTS, 0, 1);
        </script>
    </body>
</html>