HTML Canvas 3D绘图使用2D和3D上下文

在本文中，我们将介绍如何使用HTML Canvas来进行3D绘图，并利用2D和3D上下文进行绘制。HTML Canvas是一个非常强大的工具，它可以用来绘制图形，创建动画，还可以与其他Web技术结合使用。

阅读更多：HTML 教程

什么是HTML Canvas？

HTML Canvas是HTML5新增的标签之一，它允许我们使用JavaScript和画布API创建图形。通过在HTML页面上使用<canvas>标签，我们可以轻松地绘制各种形状、线条、文字和图像。而且，随着3D图形的兴起，HTML Canvas也提供了3D绘图的功能。

在画布上绘制2D图形

首先，让我们了解如何在画布上绘制2D图形。要使用2D上下文进行绘制，我们需要获取画布元素，并使用getContext()方法来获取2D上下文。以下是一个简单的示例，展示了如何绘制一个矩形：

<!DOCTYPE html>
<html>
<body>
    <canvas id="myCanvas" width="200" height="200"></canvas>

    <script>
        const canvas = document.getElementById('myCanvas');
        const context = canvas.getContext('2d');

        // 绘制一个矩形
        context.fillStyle = 'red';
        context.fillRect(50, 50, 100, 100);
    </script>
</body>
</html>

在这个示例中，我们首先通过getElementById()方法获取了ID为”myCanvas”的画布元素，并使用getContext(‘2d’)方法获取了2D上下文。然后，我们使用fillRect()方法绘制了一个填充为红色的矩形。通过设置fillStyle属性，可以更改绘制的图形的颜色。

在画布上绘制3D图形

接下来，我们将使用WebGL上下文来在画布上进行3D绘图。WebGL是一种基于OpenGL ES的3D绘图技术，它可以在Web浏览器中直接使用。要使用WebGL上下文进行绘制，我们需要获取画布元素，并使用getContext()方法来获取WebGL上下文。

以下是一个简单的示例，展示了如何在画布上绘制一个3D立方体：

<!DOCTYPE html>
<html>
<body>
    <canvas id="myCanvas" width="400" height="300"></canvas>

    <script>
        const canvas = document.getElementById('myCanvas');
        const gl = canvas.getContext('webgl');

        // 顶点着色器程序
        const vertexShaderSource = `
            attribute vec3 a_position;
            uniform mat4 u_matrix;

            void main() {
                gl_Position = u_matrix * vec4(a_position, 1.0);
            }
        `;

        // 片元着色器程序
        const fragmentShaderSource = `
            void main() {
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }
        `;

        // 创建顶点着色器
        const vertexShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vertexShader, vertexShaderSource);
        gl.compileShader(vertexShader);

        // 创建片元着色器
        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fragmentShader, fragmentShaderSource);
        gl.compileShader(fragmentShader);

        // 创建着色程序
        const program = gl.createProgram();
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        // 顶点数据
        const positions = [
            -0.5,  0.5, -0.5,
             0.5,  0.5, -0.5,
            -0.5, -0.5, -0.5,
             0.5, -0.5, -0.5,
            -0.5,  0.5,  0.5,
             0.5,  0.5,  0.5,
            -0.5, -0.5,  0.5,
             0.5, -0.5,  0.5,
        ];

        // 创建缓冲区
        const positionBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

        // 获取属性位置
        const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
        gl.enableVertexAttribArray(positionAttributeLocation);
        gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

        // 绘制
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 8);
    </script>
</body>
</html>

在这个示例中，我们首先通过getElementById()方法获取了ID为”myCanvas”的画布元素，并使用getContext(‘webgl’)方法获取了WebGL上下文。然后，我们创建了一个顶点着色器程序和一个片元着色器程序，并编译它们。接下来，我们创建了一个着色程序，并将顶点着色器和片元着色器连接到这个程序中。

我们还定义了一个立方体的顶点数据，并使用gl.bufferData()方法将这些数据写入到缓冲区中。然后，我们获取了顶点着色器中a_position属性的位置，并使用gl.enableVertexAttribArray()和gl.vertexAttribPointer()方法将缓冲区数据绑定到这个属性上。

最后，我们使用gl.drawArrays()方法绘制了一个由8个顶点组成的三角带。通过设置绘制的类型和顶点数量，我们可以绘制出各种形状的3D图形。