Description: Johnson's blog
blog (30452) portfolio (18573)
倒腾一个 Canvas 引擎 最近对 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 是一个可以使用 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
我们在听音乐的时候，可能会注意到音乐播放器里面总是会有各种各样，跟随着音乐节拍律动的特效。但是有没有思考过它是如何实现的呢？今天就来研究研究这个主题——音频可视化。 音频可视化的应用非常广泛，凡是将音频的信息通过视觉方式呈现出来的，都是音频可视化。比如我们使用录音软件时，呈现的曲线 或者测试设备麦克风🎤的时候显示的音量 甚至一些大型的音乐喷泉，舞台灯光效果等都可以算是音频可视化。 web 音频可视化依赖于 web audio 提供的 api，我在《Web Audio 概览》中已经分享过常用 api 的概念和用法，这篇文章就不再赘述。 声音信号 在写代码之前，我们先了解一下声音信号，以及可视化依赖的基础理论知识。 我们都知道，声音是通过物体振动产生的，它在空气中以波的形式传播，也称为声波。声音有三个要素：响度、音调、音色。 原始的声音信号可以看作是一个连续的信号，我们可以通过一个余弦函数来研究声音信号。下面是余弦函数 y = cos(x) 的时域图像。 上面的图像中，标出了周期和振幅，它们分别对应了三要素中的音调和响度： 周期（通常转换成频率使用）越短，频率越高则音调越高 振幅越大，响度就越大 还有一个音色，从