JavaScript - 图形

在 JavaScript 中，可以使用 Canvas API 创建图形。不过，开发者也可以使用其他一些库，例如 p5.js、chart.js、pllotly.js、Google Charts 等，来绘制各种图形和图表。

在这里，我们将探索其中一些库，并借助一些示例来学习它们。

WebGL

WebGL 允许开发者使用代码从头创建图形，并将其集成到网页中。它直接操作 HTML <canvas> 元素，允许在网页画布中使用 GPU 加速的物理、图像处理和效果。

WebGL 支持开发各种应用程序，从 2D 游戏到复杂的 3D 可视化应用程序。此外，大多数现代浏览器都支持它，这使得它成为开发人员开发图形的首选。

示例

在下面的代码中，我们使用 <canvas> 元素创建了一个画布，并使用 id 在 JavaScript 中访问它。接下来，我们使用 getCContext() 方法获取 WebGL 的上下文。如果浏览器不支持，getContext() 方法将返回未定义的值。

在 initiateShader() 函数中，我们将着色器源代码编译成着色器，将这些着色器附加到程序，然后链接该程序，以便它可以在 WebGL 上下文中使用。loadShader() 函数加载并编译着色器代码。

在 drawScene() 函数中，我们使用 useProgram() 方法，将图形信息作为参数传递，以在画布上绘制三角形。在输出中，您可以观察到黑色画布上的红色三角形。

<html>
<body>
   <h2> JavaScript - Graphics (WebGL) </h2>
   <canvas id="webgl-canvas" width="600" height="400"></canvas>
   <div id="error"> </div>
   <script>
      // 获取画布元素及其 WebGL 上下文
      var canvas = document.getElementById('webgl-canvas');
      let errorDiv = document.getElementById('error');
      // 获取 webgl 的上下文
      var gl = canvas.getContext('webgl');

      if (!gl) {
         console.error('Your browser may not support WebGL.');
      }

      // 顶点着色器程序
      var vsSource = `
         attribute vec4 aVertexPosition;
         void main(void) {
            gl_Position = aVertexPosition;
         }
         `;

      // 片段着色器程序
      var fsSource = `
      void main(void) {
         gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Red color
      }
      `;

      function initShaderProgram(gl, vsSource, fsSource) {
         const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
         const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);

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

         // 如果创建着色器程序失败，则发出警报
         if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {

            alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
            return null;
         }

         return shaderProgram;
      }

      function loadShader(gl, type, source) {
         const shader = gl.createShader(type);

         // 将源传递给着色器对象
         gl.shaderSource(shader, source);
        
         // 编译着色器程序
         gl.compileShader(shader);
        
         // 检查是否编译成功
         if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
            error.innerHTML = 'An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader);
            gl.deleteShader(shader);
            return null;
         }

         return shader;
      }

      // 初始化着色器程序;所有顶点的光照
      // 以及随后的几何体和颜色创建都将在此建立。
      var shaderProgram = initShaderProgram(gl, vsSource, fsSource);
    
      // 收集使用着色器程序所需的所有信息。
      // 查找着色器程序正在使用的属性
      // 以及 aVertexPosition 的统一位置。
      var programInfo = {
         program: shaderProgram,
         attribLocations: {
            vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
         },
      };

      // 三角形的顶点
      var positions = [
         0.0, 1.0,  // Vertex 1 (X, Y)
         -1.0, -1.0, // Vertex 2 (X, Y)
         1.0, -1.0,  // Vertex 3 (X, Y)
      ];
      var positionBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

      // 绘制场景
      function drawScene(gl, programInfo, buffers) {
        gl.clearColor(0.0, 0.0, 0.0, 1.0); // 清除为黑色，完全不透明
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.useProgram(programInfo.program);
        
        // 告诉 WebGL 如何从位置缓冲区中提取位置
        // 并将其放入 vertexPosition 属性中。
        {
            const numComponents = 2; // 每次迭代提取 2 个值
            const type = gl.FLOAT; // 缓冲区中的数据为 32 位浮点数
            const normalize = false; // 不进行规范化
            const stride = 0; // 从一个集合到下一个集合需要多少字节
            const offset = 0; // 缓冲区内从多少字节开始
            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
            gl.vertexAttribPointer(
               programInfo.attribLocations.vertexPosition,
               numComponents,
               type,
               normalize,
               stride,
               offset);
            gl.enableVertexAttribArray(
               programInfo.attribLocations.vertexPosition);
         }

         // 绘制三角形。
         gl.drawArrays(gl.TRIANGLES, 0, 3);
      }

      drawScene(gl, programInfo, positionBuffer);
   </script>
</body>
</html>

P5.js

P5.js 也是一个非常流行的图形库，用于通过编写代码创建各种形状。它还允许我们为形状添加动画效果，使其在视觉上更具吸引力。然而，它不仅限于形状，还可以与音频、视频等进行交互。

让我们通过以下示例了解 P5.js 的用法。

示例

在下面的代码中，程序以两个主要函数启动:setup() 和 draw()。setup() 函数在程序启动时运行一次，用于初始设置任务。draw() 函数会持续执行其代码块中包含的代码行，直到程序停止或调用 noLoop()，这使其成为动画的理想选择。

在 setup() 函数中，我们创建一个画布并在其上绘制圆圈。在 draw() 函数中，我们通过重新绘制圆圈来不断改变圆圈的位置。以下代码的输出显示了移动的圆圈。

<html>
<head>
   <title>p5.js Example</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>
<body>
   <script>
     // 定义圆的属性变量
     let x, y; // 位置
     let dx = 2; // x 轴的速度和方向
     let dy = -2; // y 轴的速度和方向
     let radius = 50; // 圆的半径
    
     function setup() {
        // 创建一个填充窗口的画布
        createCanvas(windowWidth, windowHeight);
        // 将圆的位置初始化为画布的中心
         x = width / 2;
         y = height / 2;
      }

      function draw() {
        background(220); // 用浅灰色填充背景
        // 绘制一个填充颜色随机的圆形
        fill(random(255), random(255), random(255));
        ellipse(x, y, radius * 2); // 圆形直径是半径的两倍
        // 更新圆形的位置
        x += dx;
        y += dy;
        
        // 检查是否弹跳
        if (x + radius > width || x - radius < 0) {
            dx = -dx; // 沿 x 轴反转方向
        }
        if (y + radius > height || y - radius < 0) {
            dy = -dy; // 沿 y 轴反转方向
        }
      }

      // 当窗口大小调整时，画布大小也随之调整
      function windowResized() {
         resizeCanvas(windowWidth, windowHeight);
      }
   </script>
</body>
</html>

Plotly.js

Plotly.js 是一个 JavaScript 库，允许开发者轻松创建各种类型的高质量图表和可视化效果。我们可以使用它来绘制统计图表、3D 图表等。Plotly.js 库可以集成到各种编程语言和框架中。

示例

在下面的代码中，我们创建了 trace1 对象，它包含 x、y 和 type 属性。之后，我们使用 newPlot() 方法根据给定的数据点创建了折线图。

<html>
<body>
   <h2> JavaScript - Graphics </h2>
   <div id = "plotlyChart" style="width:600px;height:400px;"> </div>
   <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
   <script>
      // 创建一个简单的折线图
      var trace1 = {
         x: [1, 2, 3, 4],
         y: [10, 15, 13, 17],
         type: 'scatter'
      };

      var data = [trace1];
      Plotly.newPlot('plotlyChart', data);
   </script>
</body>
</html>

Chart.js

Chart.js 也是一个 JavaScript 库，允许开发者绘制各种图表。它支持六种图表类型:折线图、条形图、雷达图、圆环图、饼图和极坐标区域图。

示例

在下面的代码中，我们使用 chart.js 库中的 Chart() 构造函数创建了一个新的条形图。

<html>
<body>
   <h2> JavaScript - Graphics </h2>
   <canvas id="chartjsBarChart" width="600" height="400"></canvas>
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <script>
      // 获取 Canvas 上下文
      var ctx = document.getElementById('chartjsBarChart').getContext('2d');
      // 创建图表
      var myChart = new Chart(ctx, {
         type: 'bar',
         data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'],
            datasets: [{
               label: '# of Votes',
               data: [1, 6, 3, 5, 2],
               backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)'
               ],
               borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)'
               ],
               borderWidth: 1
            }]
         },
         options: {
            scales: {
               y: {
                  beginAtZero: true
               }
            }
         }
      });
   </script>
</body>
</html>

Google Charts

Google Charts 库还提供各种类型的图表，包括以下图表。

• 散点图
• 条形图/柱形图
• 组织结构图
• 面积图
• 环形图
• 地图/地理图
• 折线图
• 饼图

不过，互联网上还有一些 JavaScript 库，例如 D3.js，可用于绘制各种图形。