在 JavaScript 中，可以使用 Canvas API 创建图形。但是，开发人员也可以使用其他一些库，如 p5.js、chart.js、pllotly.js、Google 图表等，来绘制各种图形和图表。
在这里，我们将探索其中一些库，并在一些示例的帮助下了解它们
WebGL 协议
WebGL 允许开发人员使用代码从头开始创建图形，并将其集成到 Web 页面中。它直接与 HTML <canvas> 元素进行操作，从而允许以 GPU 加速使用物理和图像处理以及效果作为网页画布的一部分。
WebGL 允许开发从 2D 游戏到复杂的 3D 可视化应用程序的各种应用程序。此外，大多数现代浏览器都支持它，这使其成为开发人员开发图形的首选。
例在下面的代码中，我们使用 <canvas> 元素创建了一个画布，并使用 id 在 JavaScript 中访问它。接下来，我们使用 getCContext（） 方法来获取 WebGL 的上下文。如果浏览器不支持，则 getContext（） 方法将返回 undefined 值。
在 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>
// 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 的用法。
例在下面的代码中，程序以两个主要函数开始：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>
// 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 库可以集成到各种编程语言和框架中。
例在下面的代码中，我们创建了 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>
// 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 库中的 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 图表库还提供各种类型的图表，包括下面的图表。
- 散点图
- 条形图 / 柱状图
- 組織圖
- 面积图
- 圆环图
- 地图 / 地理图
- 折线图
- 饼图
但是，互联网上还有更多可用的 JavaScript 库，例如 D3.js 可用于绘制各种图形。
