JavaScript 图形：初学者的视觉编程之旅

你好，有抱负的程序员！我很高兴能成为你进入JavaScript图形世界的向导。作为一位拥有超过十年计算机科学教学经验的人，我可以告诉你，图形编程是编码中最有回报和乐趣的方面之一。那么，让我们卷起袖子，开始吧！

JavaScript - Graphics

JavaScript 图形简介

在我们探索具体的库和工具之前，让我们了解一下为什么JavaScript中的图形如此重要。想象一下，如果所有的网站都只是纯文本——那该多无聊啊？图形为我们的数字体验带来了生机，使它们更具吸引力、信息性和有时甚至带有魔力！

WebGL：浏览器中的3D力量

WebGL是什么？

WebGL（Web图形库）是一个JavaScript API，它允许我们在网页浏览器中渲染高性能的2D和3D图形。它就像在网页中拥有一个迷你电影工作室！

你的第一个WebGL程序

让我们从一个简单的例子开始。我们将在画布上创建一个红色三角形：

<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
// 获取画布元素
var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl');

// 定义顶点着色器
var vertexShaderSource = `
attribute vec4 a_position;
void main() {
gl_Position = a_position;
}
`;

// 定义片段着色器
var fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

// 创建着色器
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// 创建程序
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

// 使用程序
gl.useProgram(program);

// 创建缓冲区
var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

// 设置几何形状
var positions = [
0.0,  0.5,
-0.5, -0.5,
0.5, -0.5
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

// 设置属性
var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

// 绘制
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>

哇，这可是个需要消化的大工程！让我们分解一下：

我们从创建一个画布元素并获取其WebGL上下文开始。
我们定义了两个着色器：一个顶点着色器（用于定位我们的三角形）和一个片段着色器（用于将其染成红色）。
我们使用这些着色器创建了一个程序。
我们创建了一个缓冲区来存储我们三角形的顶点位置。
最后，我们绘制了三角形。

如果这看起来很复杂——别担心，WebGL功能强大但学习曲线陡峭。随着我们不断进步，你会对这些概念越来越熟悉。

P5.js：轻松愉快地创意编程

P5.js是什么？

P5.js是一个使创建视觉内容变得轻松的JavaScript库。它非常适合初学者和艺术家！

使用P5.js绘制形状

让我们使用P5.js绘制一个简单的脸：

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script>
function setup() {
createCanvas(400, 400);
}

function draw() {
background(220);

// 脸
fill(255, 220, 180);
ellipse(200, 200, 300, 300);

// 眼睛
fill(0);
ellipse(150, 150, 50, 50);
ellipse(250, 150, 50, 50);

// 嘴巴
noFill();
stroke(0);
arc(200, 250, 100, 50, 0, PI);
}
</script>

这段代码创建了一个画布，绘制了一个圆形作为脸，两个较小的圆形作为眼睛，以及一个弧形作为笑容。P5.js使用一个setup()函数来初始化画布和一个draw()函数，该函数持续运行以更新绘图。

Plotly.js：让数据可视化变得美丽

Plotly.js是什么？

Plotly.js是一个高级图表库，允许您创建美丽、交互式的图表和图形。

创建条形图

让我们创建一个简单的条形图来展示水果偏好的情况：

<div id="myPlot"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script>
var data = [{
x: ['苹果', '香蕉', '橙子'],
y: [20, 14, 23],
type: 'bar'
}];

var layout = {
title: '水果偏好',
xaxis: {title: '水果'},
yaxis: {title: '投票数'}
};

Plotly.newPlot('myPlot', data, layout);
</script>

这段代码创建了一个条形图，其中三个条形代表不同水果的投票数。Plotly.js为我们处理了所有的复杂渲染！

Chart.js：简单而强大的图表

Chart.js是什么？

Chart.js是另一个受欢迎的图表库，以其简单性和响应式图表而闻名。

创建饼图

让我们创建一个饼图来展示一个人日常活动的分布情况：

<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['睡眠', '工作', '休闲', '进食', '其他'],
datasets: [{
data: [8, 8, 4, 2, 2],
backgroundColor: [
'rgba(255, 99, 132, 0.8)',
'rgba(54, 162, 235, 0.8)',
'rgba(255, 206, 86, 0.8)',
'rgba(75, 192, 192, 0.8)',
'rgba(153, 102, 255, 0.8)'
]
}]
},
options: {
title: {
display: true,
text: '日常活动'
}
}
});
</script>

这段代码创建了一个彩色的饼图，展示了一个人一天24小时是如何度过的。Chart.js为我们处理了计算和渲染。

Google Charts：借助Google的强大基础设施

Google Charts是什么？

Google Charts是一个强大的图表库，利用Google的基础设施来创建快速、交互式的图表。

创建折线图

让我们创建一个折线图来展示一家公司随时间的销售情况：

<div id="chart_div"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var data = google.visualization.arrayToDataTable([
['年份', '销售额'],
['2018',  1000],
['2019',  1170],
['2020',  660],
['2021',  1030]
]);

var options = {
title: '公司业绩',
curveType: 'function',
legend: { position: 'bottom' }
};

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>

这段代码创建了一个平滑的折线图，展示了四年的销售额。Google Charts提供了各种各样的图表类型和自定义选项。

结论

恭喜你！你已经迈出了进入JavaScript图形世界的第一步。我们涵盖了从WebGL的低级功能到Chart.js的简单性。记住，掌握这些库的关键是实践。所以，不要害怕去实验并创建你自己的可视化！

下面是一个总结我们所讨论库的表格：

库	主要用例	难度级别
WebGL	3D图形，游戏开发	高级
P5.js	创意编程，艺术项目	初学者
Plotly.js	科学和统计数据图表	中级
Chart.js	简单，响应式图表	初学者
Google Charts	多种图表，Google集成	中级

继续编码，继续创造，最重要的是，享受乐趣！图形世界是你的珍珠，JavaScript是你的宝石。快乐编码！

Credits: Image by storyset