javascript

最近对 canvas 绘图产生了点兴趣，工作中偶尔会用到一点 canvas，但是不多。空闲时间折腾了点东西，顺便写个笔记记录一下，在这之前并没有了解过 canvas 引擎相关的技术原理，只是工作中接触过 pixi.js 的部分 API。 所以这里纯粹是个人的折腾笔记。 一、Canvas 知识要点 canvas 是 HTML5 的一个特性，提供了一系列 Javascript 接口来进行图形的绘制，它除了支持 js 2d 的绘制，还支持 WebGL 3D 渲染。想要 canvas 用的溜，基础知识得搞定，有几个点我前前后后折腾过几次，总是记不住，或许写下来，就变得通透了。 模糊问题 如果是第一次开发 canvas ，基本上都会遇到图像模糊的问题，比如下图中的圆边缘看起来有些模糊 这个模糊问题通常是由于设备的 DPR 大于 1 导致的，在 DPR = 1 的设备中，1个逻辑像素由一个物理像素绘制，但是 DPR = 2 的设备中，1个逻辑像素将绘制到2个物理像素中，相当于把图形放大了一倍，所以看起来会模糊。 要解决这个问题，了解了 DPR 后，还需要了解两个知识点：画布宽高和样式宽高。 画布宽高为 canvas 标签中设置的宽高，如 <canvas width=“600” height=“300></canvas> ，样式宽高则是 css 样式中指定的宽高。 画布宽高定义了画布的真实尺寸，而样式宽高则是画布最终展现出来的尺寸，两者如果比例不一致，则会出现图像拉伸变形的情况。 前面说的模糊问题可以理解为图形被放大了 DPR 倍，那缩小回来即可，先将画布尺寸设置为样式尺寸的 DPR 倍 此时可以看到图形已经变得清晰了，但是位置和大小似乎和预期的不一致，解决这个问题，还需要设置一个缩放比例 ctx.scale(DPR, DPR) 模糊的问题到这里大概可以告一段落了，至少知道了该如何解决。 动画 canvas 的动画实现为帧动画，在每一帧中都需要去重绘整个画布，当然也可以设计局部重绘的方案，不过局部重绘在进行 diff 的阶段的开销很可能会大于全量重绘，复杂度也会提升几个量级。...

canvas 是一个可以使用 Javascript 来绘制内容的 HTML 元素。相信大多数人都对 canvas 有一些了解，我们经常用它开发一些动画，也有人用它来开发游戏、画板等应用，或者用来做一些简单的图像处理。 除了这些场景外，还可以用它来进行视频处理，视频就是图像集合按照时间顺序排列起来的，canvas 既然能处理图像，那肯定也能处理视频。 canvas 的基本用法 要在 canvas 中绘制内容，我们得先有一个 canvas，然后在 js 中获取 canvas 的上下文并使用上下文提供的 API 进行绘制 <canvas id="canvas" width="1280" height="720" style="width: 640px; height: 360px; border: 1px solid #ddd"> 很遗憾，你的浏览器不支持 canvas </canvas> <script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // 获取上下文 ctx.scale(2, 2); ctx.fillStyle = 'red'; // 设置填充颜色 ctx.beginPath(); // 开始一个路径 ctx.arc(50, 50, 20, 0, Math.PI * 2); // 圈出一个圆形区域 ctx.fill(); // 填充这个圆形 ctx....

我们在听音乐的时候，可能会注意到音乐播放器里面总是会有各种各样，跟随着音乐节拍律动的特效。但是有没有思考过它是如何实现的呢？今天就来研究研究这个主题——音频可视化。 音频可视化的应用非常广泛，凡是将音频的信息通过视觉方式呈现出来的，都是音频可视化。比如我们使用录音软件时，呈现的曲线 或者测试设备麦克风🎤的时候显示的音量 甚至一些大型的音乐喷泉，舞台灯光效果等都可以算是音频可视化。 web 音频可视化依赖于 web audio 提供的 api，我在《Web Audio 概览》中已经分享过常用 api 的概念和用法，这篇文章就不再赘述。 声音信号 在写代码之前，我们先了解一下声音信号，以及可视化依赖的基础理论知识。 我们都知道，声音是通过物体振动产生的，它在空气中以波的形式传播，也称为声波。声音有三个要素：响度、音调、音色。 原始的声音信号可以看作是一个连续的信号，我们可以通过一个余弦函数来研究声音信号。下面是余弦函数 y = cos(x) 的时域图像。 上面的图像中，标出了周期和振幅，它们分别对应了三要素中的音调和响度： 周期（通常转换成频率使用）越短，频率越高则音调越高 振幅越大，响度就越大 还有一个音色，从时域分析（后面会从频域分析），它与波形有关。比如下面这个函数，他的波形和前一个看起来不太一样，对应的播放出来音色也会有区别。 声音信号的三个要素都携带了特定的信息，而当我们听音乐的时候，优美的旋律通常都是音调的组合、变化，所以对于音乐来说，声音信号的频率携带了音乐的关键信息。 所以在音频可视化的应用场景中，以频率的可视化居多，随着音乐节奏律动的效果也大都是基于声音的频率制作的。这篇文章也主要基于频率来介绍音频可视化。 那么我们应该如何使用这个频率呢？上面的图例是一个基本的模型，他只有一个频率，仅依靠这个数据是无法实现丰富的动效的，而声音的波形也会非常复杂，并且随时间变化。这时候就需要使用傅立叶变换了。 傅立叶变换 对于傅立叶变换，有兴趣的可以深入学习，这里我们只需要知道它是做什么的即可。 傅立叶变换（Fourier transform）是一种线性积分变换，用于信号在时域时域（或空域）和频域之间的变换，在(物理学)和(工程学)中有许多应用。 下面的图片可以看到，一个方波信号被拆分成多个正弦信号的叠加，这实际上涉及到了傅立叶变换的前置知识——傅里叶级数。 🔼图片来自：维基百科 上面引用了维基百科的例子，同时我找了一个静态的图片来理解傅立叶变换。它的作用就是通过一系列数学变换，得到一个函数的频域图像（频谱），频域图像即以频率为横坐标，系数为纵坐标的图形。 🔼图片来自：维基百科 通过傅立叶变换，我们就可以获得声音信号中包含的不同成分（谐波分量）的频率，也就是频谱，然后就可以使用频谱来制作动效了。 扩展：前面说到的音色，从频域分析，除了基波频率外，其它谐波分量不同，导致了音色的差异。它反映到时域就是波的形状差别。 获取音频的频谱 大概了解了傅立叶变换后，我们来看一下如何获取一个音频的频谱数据。web audio 提供了一个 AnalyserNode，它是 AudioNode 中的一种，我们可以使用 audioContext.createAnalyser() 来创建这个节点。 const ac = new AudioContext(); // 创建音频分析节点 const analyser = ac.createAnalyser(); analyser.fftSize = 2048; // 使用正弦波做示例 const source = ac.createOscillator(); source.type = 'sine' source....

Web Audio提供了一个强大的音频处理系统，在我们现有的业务场景中，很少有使用到Web Audio，很多时候用到也仅限于播放一段音频。 除此之外，还能实现丰富的功能，比如：可视化、音色合成器、动态混音、声音特效、3D空间音频、均衡器、环境混响等，可以应用在音乐播放器、电子音乐软件、游戏音效、音乐游戏、直播互动等领域。 这篇文章是我在学习Web Audio的过程中写的一些总结和Demo，简单介绍一些API基础用法。 文章中所有示例：https://web-audio.johnsonlee.site/ AudioContext AudioContext为音频处理提供一个上下文环境，相当于一个中央控制器，控制着音频路由图中的各个音频模块。 在开始音频处理之前，都需要创建一个AudioContext实例，并且可以全局共享同一个。所有（相关）的音频节点都需要包含在同一个AudioContext中，每个音频节点，只能关联一个AudioContext。 音频节点 音频节点即AudioNode，它是一个基类，作为一个音频路由图中的基本单位，它的工作依赖于AudioContext。 音频节点拥有自己的输入/输出，可以通过connect方法将一个节点的输出连接至另一个节点的输入。比如我们可以将一个音频节点连接至audioContext.destination节点来进行音频播放。 audioBufferSourceNode.connect(audioContext.destination) 上面的audioContext.destination是音频节点中的一种，音频节点可以分为三类： Source Node：能产生音频的节点，只有输出，没有输入。 Process Node：对音频进行处理的节点，有输入（可能有多个）和输出。 Destination Node：通常为音频播放设备，如扬声器。 有的音频处理节点会有多个输出，比如ChannelSplitterNode，可以将音频拆分为多个声道，对应的，也有一个合并声道的节点ChannelMergerNode，有多个输入和一个输出。 路由图 Web Audio 提供的是模块化的API，在AudioContext中，各个音频节点的连接，构建了一个路由图，audioContext控制着整个路由图的运转。比如下面一个简单的音频播放示例 const ac = new AudioContext() const $audio = document.querySelector('#audio'); const sourceNode = ac.createMediaElementSource($audio); // 从audio标签创建一个音频源节点 const gainNode = ac.createGain(); // 创建一个增益节点 gainNode.gain.value = 0; // 将增益设置为0（相当于音量设置为0） $audio.addEventListener('play', () => { gainNode.gain.exponentialRampToValueAtTime(1, 1); // 在1秒的时间内指数增长到1，实现一个播放渐入效果 }); sourceNode.connect(gainNode); // 音频源节点连接到增益节点 gainNode.connect(ac.destination); // 增益节点连接到destination进行播放 音频源 web中音频源包括： audio节点 网络加载的音频文件 实时音频流（webRTC、麦克风） 能产生音频信号的音频节点（如：OscillatorNode） 从标签加载音频源 网络加载的音频文件，需要将其转换成音频源节点，才能连接到路由图中，比如我们经常使用的<audio>标签，它是不能直接连接到其它音频节点的...

在开发工具库的时候，为保证代码的稳定性和健壮性，我们需要编写完善的测试程序。同时也会集成 CI/CD 等工具优化工作流，提高开发效率。 如果你还不清楚如何开发一个 js 库，可以阅读《typescript 开发工具库入门》 对于一个成熟的 JavaScript 库，单元测试是必要的。现有的 JavaScript 测试框架有很多，karma, mocha, sinon, jasmine, jest等，其中jest是 Facebook 开源的一个开箱即用的测试框架，使用起来非常简单方便。本文将为《typescript 开发工具库入门》中的示例库natulu集成 jest 单元测试。 安装测试框架 我们的项目使用的是 typescript，所以需要配置 jest 以支持 typescript。幸运的是已经有提供了ts-jest库来解决这个事情，我们只需要简单的配置就能使用。 yarn add -D jest ts-jest @types/jest 创建配置文件 执行以下命令自动创建一个 jest 配置文件 yarn ts-jest config:init 生成的配置文件如下 module.exports = { preset: 'ts-jest', testEnvironment: 'node', // 如果是浏览器环境，可以设置为jest-environment-jsdom或删除该配置项 } 也可以使用 jest 来创建配置文件 yarn jest --init 按照步骤选择合适的选项后，将preset设置为ts-jest module.exports = { coverageDirectory: 'coverage', // 单元测试覆盖率生成目录 preset: 'ts-jest', testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[tj]s?(x)'], } 然后我们在 package....