Javascript 简明教程

JavaScript - Graphics

在 JavaScript 中，图形可以使用画布 API 创建。但是，开发人员还可以使用一些其他库（如 p5.js、chart.js、pllotly.js、Google Chart 等）来绘制各种图形和图表。

In JavaScript, graphics can be created using the Canvas API. However, developers can also use some other libraries, like p5.js, chart.js, pllotly.js, Google charts, etc., to draw various graphics and charts.

在此，我们将在一些示例的帮助下，探究其中的部分库并学习它们

Here, we will explore some of these libraries and learn about them with help of some examples

WebGL

WebGL 允许开发人员使用代码从头开始创建图形，并在网页中集成该图形。它直接使用 HTML <canvas> 元素，允许物理和图像处理以及效果的 GPU 加速使用，这些效果是网页画布的一部分。

WebGL allows developers to create graphics from scratch using the code, and integrate it in the web pages. It operates directly with the HTML <canvas> element, allowing for GPU-accelerated usage of physics and image processing and effects as part of the web page canvas.

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

WebGL allows to development of a wide range of applications from 2D games to complex 3D visualization applications. Also, it is supported by most modern browsers, which makes it a go-to choice for developers to develop graphics.

Example

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

In the code below, we have used the <canvas> element to create a canvas and accessed it in the JavaScript using the id. Next, we used the getCContext() method to get the context of the WebGL. If it is not supported by the browser, the getContext() method returns undefined value.

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

In the initiateShader() function, we compile the shader source code into shaders, attach those shaders to a program, and then link the program so it can be used in a WebGL context. The loadShader() function loads and compiles the shader code.

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

In the drawScene() function, we use the useProgram() method by passing the graphics info as a parameter to draw a triangle on the canvas. In the output, you can observe the red triangle on the black canvas.

<html>
<body>
   <h2> JavaScript - Graphics (WebGL) </h2>
   <canvas id="webgl-canvas" width="600" height="400"></canvas>
   <div id="error"> </div>
   <script>
      // Get the canvas element and its WebGL context
      var canvas = document.getElementById('webgl-canvas');
      let errorDiv = document.getElementById('error');
      // Get context of webgl
      var gl = canvas.getContext('webgl');

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

      // Vertex shader program
      var vsSource = `
         attribute vec4 aVertexPosition;
         void main(void) {
            gl_Position = aVertexPosition;
         }
         `;

      // Fragment shader program
      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);

         // Create the shader program
         const shaderProgram = gl.createProgram();
         gl.attachShader(shaderProgram, vertexShader);
         gl.attachShader(shaderProgram, fragmentShader);
         gl.linkProgram(shaderProgram);

         // If creating the shader program failed, alert
         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);

         // Send the source to the shader object
         gl.shaderSource(shader, source);

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

         // See if it compiled successfully
         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;
      }

      // Initialize a shader program; this is where all the lighting
      // for the vertices and subsequently the creation of the
      // geometry and colors will be established.
      var shaderProgram = initShaderProgram(gl, vsSource, fsSource);

      // Collect all the info needed to use the shader program.
      // Look up which attribute our shader program is using
      // for aVertexPosition and look up uniform locations.
      var programInfo = {
         program: shaderProgram,
         attribLocations: {
            vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
         },
      };

      // Vertices of the triangle
      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);

      // Draw the scene
      function drawScene(gl, programInfo, buffers) {
         gl.clearColor(0.0, 0.0, 0.0, 1.0);  // Clear to black, fully opaque
         gl.clear(gl.COLOR_BUFFER_BIT);
         gl.useProgram(programInfo.program);

         // Tell WebGL how to pull out the positions from the position
         // buffer into the vertexPosition attribute.
         {
            const numComponents = 2;  // pull out 2 values per iteration
            const type = gl.FLOAT;    // the data in the buffer is 32bit floats
            const normalize = false;  // don't normalize
            const stride = 0;         // how many bytes to get from one set to the next
            const offset = 0;         // how many bytes inside the buffer to start from
            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
            gl.vertexAttribPointer(
               programInfo.attribLocations.vertexPosition,
               numComponents,
               type,
               normalize,
               stride,
               offset);
            gl.enableVertexAttribArray(
               programInfo.attribLocations.vertexPosition);
         }

         // Draw the triangle.
         gl.drawArrays(gl.TRIANGLES, 0, 3);
      }

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

P5.js

P5.js 也是一个非常受欢迎的图形库，用于编写代码以创建各种形状。它还允许我们为形状设置动画，并在视觉上让形状更具吸引力。但是，它并不局限于形状，而且还允许与音频、视频等进行交互。

P5.js is also a very popular graphics library used to create various shapes by writing the code. It also allows us to animate the shapes and make them visually more appealing. However, it is not limited to shape but it also allows to interact with audio, video, etc.

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

Let’s understand the usage of P5.js with the example below.

Example

在下面的代码中，该程序从两个 main 函数开始：setup() 和 draw()。setup() 函数在程序开始时运行一次，它用于初始设置任务。draw() 函数持续执行其块中包含的代码行，直到程序停止或调用 noLoop()，这使其非常适合动画。

In the code below, the program starts with two main functions: setup() and draw(). The setup() function is run once when the program starts, and it’s used for initial setup tasks. The draw() function continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called, making it ideal for animations.

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

In the setup() function, we create a canvas and draw the circle on that. In the draw() function, we continuously change the position of the circles by redrawing them. The output of the below code shows the moving circle.

<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>
      // Define variables for the circle's properties
      let x, y; // Position
      let dx = 2; // Speed and direction on x-axis
      let dy = -2; // Speed and direction on y-axis
      let radius = 50; // Circle's radius

      function setup() {
         // Create a canvas that fills the window
         createCanvas(windowWidth, windowHeight);
         // Initialize circle's position to center of the canvas
         x = width / 2;
         y = height / 2;
      }

      function draw() {
         background(220); // Fill the background with a light gray color
         // Draw a circle with a random fill color
         fill(random(255), random(255), random(255));
         ellipse(x, y, radius * 2); // Circle diameter is twice the radius
         // Update the position of the circle
         x += dx;
         y += dy;

         // Check for bouncing
         if (x + radius > width || x - radius < 0) {
            dx = -dx; // Reverse direction on the x-axis
         }
         if (y + radius > height || y - radius < 0) {
            dy = -dy; // Reverse direction on the y-axis
         }
      }

      // Resize the canvas when the window is resized
      function windowResized() {
         resizeCanvas(windowWidth, windowHeight);
      }
   </script>
</body>
</html>

Plotly.js

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

Plotly.js is a JavaScript library that allows developers to create various types of high-quality graphs and visualizations with ease. We can use it to draw statistical charts, 3d charts, etc. The Plotly.js library can be integrated into various programming languages and frameworks.

Example

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

In the code below, we have created the trace1 object, which contains the x, y, and type properties. After that, we used the newPlot() method to create a line chart using the given data points.

<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>
      // Create a simple line chart
      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 is also a JavaScript library that allows developers to draw various kinds of charts. It supports six chart types: line, bar, radar, doughnut, pie, and polar area.

Example

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

In the code below, we used the Chart() constructor from the chart.js library to create a new bar 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>
      // Get Canvas context
      var ctx = document.getElementById('chartjsBarChart').getContext('2d');
      // Create a chart
      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 Chart 库也提供各种类型的图表，包括以下图表。

Google Charts library also provides various types of charts, including the ones below.

  1. Scatter Chart

  2. Bar / Column Chart

  3. Org Chart

  4. Area Chart

  5. Donut Chart

  6. Map / Geo Chart

  7. Line Chart

  8. Pie Chart

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

However, there are some more JavaScript libraries like D3.js available on the internet that can be used to draw various kinds of graphics.