AudioContext技术和音乐可视化（2）
Intro
转载请注明来源，可以在测试博客查看完成效果。
本篇讲述如何绘制动态的星空，其实关联到频域数据已经没什么悬念了。
一、使用Canvas绘图
1.1 位置和大小
绘制背景的第一要务便是把canvas元素放置在背景这一层次上，避免遮盖其他元素。
对我而言，个人习惯用css来设置大小和位置，用html来确定渲染顺序而不是z-index。
下面是html代码。
<html>
<body>
<canvas id="background-canvas"></canvas>
<!-- other elements -->
</body>
</html>
下面是css代码。
#background-canvas {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background-color: black;
}
fixed确保拖动页面不会令背景也跟随移动。
其余部分我想应该没什么有疑问的地方。
1.2 CanvasContext2D
对于canvas元素的绘图操作我想很多人应该接触过。
以绘制圆形为例，使用如下代码。
const canvas = document.getElementById("background-canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle='#fff';
ctx.beginPath();
ctx.arc(100,100,50,0,Math.PI*2); // 参数分别为坐标x,y,半径，起始弧度，结束弧度
ctx.fill();
这样就画完了一个实心圆。
需要注意，canvas的大小通过css设置可能导致画面被拉伸变形模糊，所以最好的办法是绘制前确定一下canvas的大小。
此外需要注意的是，重置大小会导致画面清空，用这种方式可以替代fillRect或者clearRect，有的浏览器平台更快但也有浏览器更慢。可以查阅这篇博文来参考如何提升canvas绘图性能。
fillStyle可以使用css的颜色代码，也就是说我们可以写下诸如rgba、hsla之类的颜色，这给我们编写代码提供了很多方便。
1.3 绘制星星
星空是由星星组成的这显然不用多说了，先来看如何绘制单个星星。
星星的绘制方法很多，贴图虽然便利但显然不够灵活，我们的星星是要随节奏改变亮度和大小的，利用贴图的话就只能在alpha值和drawImage缩放来处理了。虽然是一种不错的办法，不过这里我使用了RadialGradient来控制绘图。
PS：
RadialGradient的性能比较差，大量使用会导致明显的性能下降，这是一个显著降低绘制效率的地方。
那么，我们先画一个圆（加点细节预警）。
const canvas = document.getElementById("background-canvas");
const ctx = canvas.getContext("2d");
// 确保不会变形
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
// 参数分别为起始坐标x,y,半径，结束坐标x,y,半径
const gradient = ctx.createRadialGradient(100, 100, 0, 100, 100, 50);
gradient.addColorStop(0.025, "#fff"); // 中心的亮白色
gradient.addColorStop(0.1, "rgba(255, 255, 255, 0.9)"); // 核心光点和四周的分界线
gradient.addColorStop(0.25, "hsla(198, 66%, 75%, 0.9)"); // 核心亮点往四周发散的蓝光
gradient.addColorStop(0.75, "hsla(198, 64%, 33%, 0.4)"); // 蓝光边缘
gradient.addColorStop(1, "hsla(198, 64%, 33%, 0)"); // 淡化直至透明
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fill();
可以在codepen查看效果或直接编辑你的星（圈）星（圈）。
看上去还不错？
让我们用代码控制它的亮度和大小。
const canvas = document.getElementById("background-canvas");
const ctx = canvas.getContext("2d");
// 确保不会变形
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
// 通过energy控制亮度和大小
let energy = 255;
let radius = 50;
let energyChangeRate = -1;
function draw() {
requestAnimationFrame(draw); // 定时绘制，requestAnimationFrame比setTimeout更好。
energy += energyChangeRate; // 见过呼吸灯吧？我们让它变亮~再变暗~反复循环~
if (energy <= 0 || energy >= 255) energyChangeRate = -energyChangeRate;
// 计算出当前的大小
const r = radius + energy * 0.1;
// 清空屏幕
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 参数分别为起始坐标x,y,半径，结束坐标x,y,半径
const gradient = ctx.createRadialGradient(100, 100, 0, 100, 100, r);
gradient.addColorStop(0.025, "#fff"); // 中心的亮白色
gradient.addColorStop(0.1, "rgba(255, 255, 255, 0.9)"); // 核心光点和四周的分界线
gradient.addColorStop(0.25, `hsla(198, 66%, ${Math.min(75+energy*0.01,100)}%, 0.9)`); // 核心亮点往四周发散的蓝光
gradient.addColorStop(0.75, `hsla(198, 64%, ${Math.min(33+energy*0.01,100)}%, 0.4)`); // 蓝光边缘
gradient.addColorStop(1, "hsla(198, 64%, 33%, 0)"); // 淡化直至透明
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(100, 100, r, 0, Math.PI * 2);
ctx.fill();
}
draw();
可以在codepen查看并编辑效果。
1.4 封装星星
通常来说粒子系统不大会把单个粒子封装成类，因为函数调用的开销还是蛮大的。。。
不过在这里我们这里就先这样了，方便理解和阅读。渲染的瓶颈解决之前，粒子函数调用这点开销根本不是回事儿。
const canvas = document.getElementById("background-canvas");
const ctx = canvas.getContext("2d");
// 确保不会变形
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
// 用javascript原生的class而不是prototype
class Star {
constructor(x, y, radius, lightness) {
this.radius = radius;
this.x = x;
this.y = y;
this.lightness;
}
draw(ctx, energy) {
// 计算出当前的大小
const r = this.radius + energy * 0.1;
// 参数分别为起始坐标x,y,半径，结束坐标x,y,半径
const gradient = ctx.createRadialGradient(
this.x,
this.y,
0,
this.x,
this.y,
r
);
gradient.addColorStop(0.025, "#fff"); // 中心的亮白色
gradient.addColorStop(0.1, "rgba(255, 255, 255, 0.9)"); // 核心光点和四周的分界线
gradient.addColorStop(
0.25,
`hsla(198, 66%, ${Math.min(75 + energy * 0.01, 100)}%, 0.9)`
); // 核心亮点往四周发散的蓝光
gradient.addColorStop(
0.75,
`hsla(198, 64%, ${Math.min(33 + energy * 0.01, 100)}%, 0.4)`
); // 蓝光边缘
gradient.addColorStop(1, "hsla(198, 64%, 33%, 0)"); // 淡化直至透明
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(this.x, this.y, r, 0, Math.PI * 2);
ctx.fill();
}
}
const star = new Star(100, 100, 50);
let energy = 255;
let energyChangeRate = -1;
// 渲染函数来循环渲染！
function render() {
requestAnimationFrame(render);
energy += energyChangeRate;
if (energy <= 0 || energy >= 255) energyChangeRate = -energyChangeRate;
// 清空屏幕
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
star.draw(ctx, energy);
}
// 开始渲染动画！
render();
可以在codepen查看代码效果。
完成！
1.5 银河
绘制银河的核心在于随机分布的星星绕着同一中心点旋转，分为两步来讲，第一步是随机分布，这很简单，用Math.random就好了。
// star 部分略
class Galaxy {
constructor(canvas) {
this.stars = [];
this.canvas = canvas;
this.ctx = canvas.getContext("2d");
this.energy = 255;
this.energyChangeRate = -2;
}
init(num) {
for (let i = 0; i < num; i++) {
this.stars.push(
// 随机生成一定数量的星星，初始化星星位置和大小。
new Star(
Math.random() * this.canvas.width,
Math.random() * this.canvas.height,
Math.random() * 10 + 1,
Math.random() * 30 + 33
)
);
}
}
render() {
this.energy += this.energyChangeRate;
if (this.energy <= 0 || this.energy >= 255)
this.energyChangeRate = -this.energyChangeRate;
// 清空屏幕
this.ctx.fillStyle = "black";
this.ctx.fillRect(0, 0, canvas.width, canvas.height);
for (const star of this.stars) {
star.draw(this.ctx, this.energy);
}
}
}
const canvas = document.getElementById("background-canvas");
// 确保不会变形
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
const galaxy = new Galaxy(canvas);
galaxy.init(50);
function render() {
requestAnimationFrame(render);
galaxy.render();
}
render();
可以在codepen查看效果和完整代码。
1.6 旋转起来！
【加点细节预警】
接下来我们为星星准备轨道参数，让它们动起来！
首先修改Star类，加入几个字段。
class Star {
constructor(x, y, radius, lightness, orbit, speed, t) {
this.radius = radius;
this.x = x;
this.y = y;
this.lightness;
this.orbit = orbit; // 轨道
this.speed = speed; // 运动速度
this.t = t; // 三角函数x轴参数，用 sin/cos 组合计算位置
}
// 下略
}
修改初始化代码。
// 前略
init(num) {
const longerAxis = Math.max(this.canvas.width, this.canvas.height);
const diameter = Math.round(
Math.sqrt(longerAxis * longerAxis + longerAxis * longerAxis)
);
const maxOrbit = diameter / 2;
for (let i = 0; i < num; i++) {
this.stars.push(
// 随机生成一定数量的星星，初始化星星位置和大小。
new Star(
Math.random() * this.canvas.width,
Math.random() * this.canvas.height,
Math.random() * 10 + 1,
Math.random() * 30 + 33,
Math.random() * maxOrbit, // 随机轨道
Math.random() / 1000, // 随机速度
Math.random() * 100 // 随机位置
)
);
}
// 后略
然后在Galaxy里加入控制移动的代码。
move() {
for (const star of this.stars) {
console.log(star.orbit)
star.x = this.canvas.width/2+ Math.cos(star.t) * star.orbit;
star.y = this.canvas.height/2+ Math.sin(star.t) * star.orbit/2;
star.t += star.speed;
}
然后每一帧进行移动！
function render() {
requestAnimationFrame(render);
galaxy.render();
galaxy.move(); // 动起来！
}
大功告成！
在codepen查看完整源码！
1.7 待续
PS：不保证粘贴的代码都能跑，反正codepen上是都能的。
