JavaScript 图形库

WebGL

WebGL 允许开发者从零开始使用代码创建图形，并将其集成到网页中。它直接与 HTML <canvas> 元素交互，允许作为网页画布的一部分使用 GPU 加速物理处理和图像处理及效果。

WebGL 支持开发从 2D 游戏到复杂的 3D 可视化应用程序的广泛范围的应用程序。同时，由于大多数现代浏览器都支持 WebGL，使得它成为开发者开发图形的首选工具。

示例

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

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

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

<html>
<body>
   <h2>JavaScript - 图形 (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('您的浏览器可能不支持 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); // 红色
         }
      `;

      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('无法初始化着色器程序: ' + 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)) {
            errorDiv.innerHTML = '编译着色器时发生错误: ' + gl.getShaderInfoLog(shader);
            gl.deleteShader(shader);
            return null;
         }

         return shader;
      }

      // 初始化一个着色器程序；在这里将建立所有的光照
      // 对于顶点和随后的几何体和颜色的创建。
      var shaderProgram = initShaderProgram(gl, vsSource, fsSource);

      // 收集所有使用着色器程序所需的信息。
      // 查找着色器程序正在使用的属性位置和统一变量的位置。
      var programInfo = {
         program: shaderProgram,
         attribLocations: {
            vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
         },
      };

      // 三角形的顶点
      var positions = [
         0.0, 1.0,  // 顶点 1 (X, Y)
         -1.0, -1.0, // 顶点 2 (X, Y)
         1.0, -1.0,  // 顶点 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 如何从位置缓冲区中提取位置
         // 并将其放入顶点位置属性中。
         {
            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 不仅仅局限于形状，它还允许与音频、视频等进行交互。

示例

让我们通过下面的例子来理解 P5.js 的使用方法。

// 设置画布大小
function setup() {
  createCanvas(400, 400);
}

// 在每次绘制时调用
function draw() {
  background(220);
  // 绘制一个红色的圆
  fill(255, 0, 0);
  noStroke();
  ellipse(width / 2, height / 2, 100, 100);
}

这段代码将会创建一个 400x400 的画布，并在画布中央绘制一个红色的圆形。setup() 函数设置了画布的大小，而 draw() 函数则会在每次循环时调用，负责更新和绘制画布内容。在这个例子中，背景被设置为浅灰色，然后绘制一个没有边框的红色圆形。

JavaScript 图形库示例

P5.js

P5.js 是一个非常流行的图形库，用于通过编写代码创建各种形状。它还允许我们对这些形状进行动画处理，使其看起来更具视觉吸引力。然而，P5.js 不仅仅局限于形状，它还允许与音频、视频等进行交互。

示例

在下面的代码中，程序开始时有两个主要函数：setup() 和 draw()。setup() 函数在程序启动时只运行一次，用于初始设置任务。draw() 函数则会连续执行其块内的代码行，直到程序停止或者调用了 noLoop()，这使得它非常适合制作动画。

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

<html>
<head>
   <title>p5.js 示例</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 - 图形</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 - 图形</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 可以用来绘制各种图形。