Hello，大家好，我是 Sunday。
前段时间有个同学问了我一个需求：如何在一个椭圆上均匀放置任意多的DOM。需求效果如下
我一看这个需求，这不得用到”传说”中的初中数学了吗？然后我“掐指一算”还真给忘完了…
没得办法，只能去翻了翻“初中课本”，找到了椭圆计算的方式，最终写了如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Icons on Ellipse</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const a = 150; // 长轴
const b = 100; // 短轴
const iconRadius = 8; // 图标半径
const numberOfIcons = 10; // 图标数量
ctx.fillStyle = 'blue';
for (let i = 0; i < numberOfIcons; i++) {
const angle = (Math.PI * 2) * (i / numberOfIcons);
const x = centerX + a * Math.cos(angle);
const y = centerY + b * Math.sin(angle);
// 在计算的坐标处绘制圆形图标
ctx.beginPath();
ctx.arc(x, y, iconRadius, 0, Math.PI * 2);
ctx.fill();
}
</script>
</body>
</html>
通过这样的代码实现了椭圆均匀分布的效果：
不过，做过多年开发的同学都知道，数学这种东西，真的挺容易忘的。所以说，我专门去翻了翻 Github 找到了一个专业的扩展数据库，它就是：Math.js
01：什么是 Math.js
Math.js 是一个适用于 JavaScript 和 Node.js 的扩展数学库，支持符号计算，并提供了广泛的功能，涵盖数字、大数字、复数、分数、单位和矩阵等多种数据类型。它与JavaScript内置数学库兼容，适用于各类ES6兼容的JavaScript引擎，如Node.js、Chrome、Firefox、Safari和Edge等。
Math.js的主要特性包括：
- 支持多种数据类型，包括数字、大数字、复数、分数、单位、字符串、数组和矩阵。
- 与JavaScript内置数学库兼容。
- 强大的表达式解析器和符号计算支持。
- 内置丰富的函数和常量。
- 可作为命令行应用程序使用。
- 可在任何JavaScript引擎上运行。
- 易于扩展且完全开源。
目前，Math.js在GitHub上采用MIT许可协议开源，拥有超过13.7k的星标、1.3k的分支、63.8k的项目依赖量以及来自200多位贡献者的代码贡献。是一个备受推崇的优质前端开源项目。
02：为什么需要 Math.js
Math.js的目标在于提供一个环境，让开发者能够使用混合数据类型进行计算，比如将普通数字与复数或BigNumber相乘，以及对矩阵中的各种数据进行处理。它还允许轻松添加新的数据类型，比如BigInt。
Math.js采用了两个核心解决方案：
-
类型化函数（Typed functions）：所有函数都利用typed-function创建，这使得动态创建和扩展单个函数以及自动对函数输入进行类型转换变得更加简单。比如，可以通过支持两个BigInt相乘来扩展乘法函数。如果定义了从BigInt到数字的转换，typed-function会自动允许BigInt与数字相乘。
-
依赖注入（Dependency injection）：当有一个支持BigInt的multiply函数时，由于依赖注入，其他在底层使用multiply的函数也将自动支持BigInt，反之亦然。如果只需要简单的数字支持，不需要过重的multiply（支持BigNumbers、矩阵等），可以使用仅用于数字的轻量级multiply实现，并将其注入到prod和其他函数中。
在底层，mathjs采用了不可变函数的不可变工厂函数。核心函数math.create(…)用于创建一个新实例，包含从传递的所有工厂函数创建的函数。mathjs实例是创建函数的集合。它还包含像math.import这样的函数，允许使用新函数扩展实例，然后可以在表达式解析器中使用。
03：如何使用 Math.js
Math.js是一个多功能的库，可在Node.js和浏览器环境中使用。它类似于JavaScript的内置Math库，但更进一步，支持表达式计算和链式操作。
// 使用函数和常量
math.round(math.e, 3); // 得到2.718
math.atan2(3, -3) / math.pi; // 返回0.75
math.log(10000, 10); // 输出4
math.sqrt(-4); // 返回2i
math.pow(
[
[-1, 2],
[3, 1],
],
2
); // 得到[[7, 0], [0, 7]]
// 表达式计算
math.evaluate('12 / (2.3 + 0.7)'); // 返回4
math.evaluate('12.7 cm to inch'); // 输出5 inch
math.evaluate('sin(45 deg) ^ 2'); // 得到0.5
math.evaluate('9 / 3 + 2i'); // 返回3 + 2i
math.evaluate('det([-1, 2; 3, 1])'); // 输出-7
// 链式操作
math.chain(3).add(4).multiply(2).done(); // 返回14
这些例子展示了Math.js的灵活性，无论是进行基本数学运算、处理单位转换还是进行复杂的矩阵计算，都能轻松应对。而链式操作则允许你连续调用多个函数，简洁地处理多步计算。
前端训练营：1v1私教，终身辅导计划，帮你拿到满意的
offer。 已帮助数百位同学拿到了中大厂offer。欢迎来撩~~~~~~~~
原文链接：https://juejin.cn/post/7315630639797125139 作者：程序员Sunday
