Javascript 简明教程
JavaScript - Graphics
在 JavaScript 中，图形可以使用画布 API 创建。但是，开发人员还可以使用一些其他库（如 p5.js、chart.js、pllotly.js、Google Chart 等）来绘制各种图形和图表。
在此，我们将在一些示例的帮助下，探究其中的部分库并学习它们
WebGL
WebGL 允许开发人员使用代码从头开始创建图形，并在网页中集成该图形。它直接使用 HTML <canvas> 元素，允许物理和图像处理以及效果的 GPU 加速使用，这些效果是网页画布的一部分。
WebGL 允许开发众多应用程序，从 2D 游戏到复杂的 3D 可视化应用程序。此外，大多数现代浏览器都支持它，这使得它成为开发人员开发图形的首选。
Example
在下方的代码中，我们使用了 <canvas> 元素来创建画布，并使用 id 在 JavaScript 中访问了它。接下来，我们使用了 getContext() 方法来获取 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 的用法。
Example
在下面的代码中，该程序从两个 main 函数开始：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 库可以集成到各种编程语言和框架中。
Example
在下面的代码中，我们创建了 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 库，允许开发人员绘制各种图表。它支持六种图表类型：折线图、柱状图、雷达图、环形图、饼图和极坐标面积图。
Example
在下面的代码中，我们使用了 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>