CSS Conic-Gradient：饼图与复杂光效的数学原理
大家好，今天我们来深入探讨 CSS 中的 conic-gradient() 函数，也就是圆锥渐变。 虽然它不如线性渐变或径向渐变那么常见，但 conic-gradient() 拥有强大的能力，可以创建饼图、环形图，甚至是模拟复杂的光照效果。 理解其背后的数学原理，能帮助我们更灵活地运用它。
1. conic-gradient() 的基本语法
conic-gradient() 的基本语法如下：
conic-gradient([from <angle>] [at <position>]?, <color-stop-list>)from <angle>(可选)：指定渐变起始的角度。 默认值为0deg，表示从顶部开始（正上方）。角度的单位可以是deg（度）、rad（弧度）、turn（圈）或grad（百分度）。at <position>(可选)：指定渐变的中心点。 默认值为center，即元素的中心。 可以使用top,bottom,left,right,center关键字，或者使用x y坐标值，例如at 50% 50%或at 100px 200px。<color-stop-list>：定义渐变的颜色停止点。 每个颜色停止点由一个颜色值和一个可选的位置值组成。 位置值可以是百分比或长度值。
颜色停止点的例子：
conic-gradient(red 0%, yellow 50%, blue 100%)这个例子表示：
- 从 0%（起始位置）到 50% 的角度范围，颜色从红色渐变到黄色。
- 从 50% 到 100%（结束位置）的角度范围，颜色从黄色渐变到蓝色。
2. 坐标系与角度
理解 conic-gradient() 的坐标系和角度是至关重要的。
- 坐标系：
conic-gradient()使用的是元素的局部坐标系。at属性定义的中心点就是这个坐标系的原点。 - 角度： 角度从正上方（12 点钟方向）开始，顺时针旋转。
| 角度 (deg) | 方向 |
|---|---|
| 0 | 正上方 |
| 90 | 正右方 |
| 180 | 正下方 |
| 270 | 正左方 |
| 360 | 正上方 (一圈) |
3. 创建饼图
conic-gradient() 最常见的应用之一是创建饼图。 让我们看一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<title>饼图示例</title>
<style>
.pie-chart {
width: 200px;
height: 200px;
border-radius: 50%; /* 使其成为圆形 */
background: conic-gradient(
red 25%,
yellow 25% 50%,
blue 50% 75%,
green 75% 100%
);
}
</style>
</head>
<body>
<div class="pie-chart"></div>
</body>
</html>代码解释：
.pie-chart： 定义了一个 200×200 像素的圆形区域。border-radius: 50%使其成为一个圆形。background: conic-gradient(...)： 应用圆锥渐变。red 25%： 从 0% 到 25% 的角度范围，颜色为红色。yellow 25% 50%： 从 25% 到 50% 的角度范围，颜色为黄色。blue 50% 75%： 从 50% 到 75% 的角度范围，颜色为蓝色。green 75% 100%： 从 75% 到 100% 的角度范围，颜色为绿色。
关键点：
- 饼图的每个扇区的大小由其对应的角度范围决定。 百分比值表示角度占整个圆的比例。
- 为了确保扇区之间没有缝隙，每个扇区的结束位置必须等于下一个扇区的起始位置。
更灵活的饼图数据驱动：
可以使用 JavaScript 来动态生成饼图的数据和样式。
<!DOCTYPE html>
<html>
<head>
<title>动态饼图示例</title>
<style>
.pie-chart {
width: 200px;
height: 200px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="pie-chart" id="myChart"></div>
<script>
const data = [
{ label: "Red", value: 25, color: "red" },
{ label: "Yellow", value: 25, color: "yellow" },
{ label: "Blue", value: 25, color: "blue" },
{ label: "Green", value: 25, color: "green" },
];
const chartElement = document.getElementById("myChart");
let startAngle = 0;
let gradientString = "conic-gradient(";
data.forEach((item) => {
const angle = (item.value / 100) * 360;
gradientString += `${item.color} ${startAngle}deg ${startAngle + angle}deg,`;
startAngle += angle;
});
gradientString = gradientString.slice(0, -1) + ")"; // Remove trailing comma
chartElement.style.background = gradientString;
</script>
</body>
</html>代码解释：
data： 存储饼图的数据，包括标签、数值和颜色。- JavaScript 代码计算每个扇区的角度，并构建
conic-gradient()的字符串。 startAngle变量用于跟踪每个扇区的起始角度。
4. 创建环形图（甜甜圈图）
环形图是在饼图的基础上，在中心挖空一个圆。 可以使用 radial-gradient() 遮罩 conic-gradient() 实现。
<!DOCTYPE html>
<html>
<head>
<title>环形图示例</title>
<style>
.donut-chart {
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(
red 25%,
yellow 25% 50%,
blue 50% 75%,
green 75% 100%
);
mask: radial-gradient(circle at center, transparent 60%, black 60%); /* 创建遮罩 */
-webkit-mask: radial-gradient(circle at center, transparent 60%, black 60%); /* 兼容性 */
}
</style>
</head>
<body>
<div class="donut-chart"></div>
</body>
</html>代码解释：
mask: radial-gradient(...)： 创建一个径向渐变遮罩。circle at center： 径向渐变的中心点位于元素的中心。transparent 60%, black 60%： 从中心到 60% 的半径范围内，颜色为透明；从 60% 的半径到边缘，颜色为黑色。 这会在中心创建一个透明的圆形区域，从而形成环形效果。
关键点：
radial-gradient()的颜色值和位置值决定了环的宽度。- 可以使用
-webkit-mask属性提供兼容性支持。
5. 实现复杂光效
conic-gradient() 不仅仅可以用于简单的图表，还可以用于模拟复杂的光照效果。 通过控制颜色停止点的位置和颜色值，可以创建各种各样的光照效果。
示例：模拟聚光灯效果
<!DOCTYPE html>
<html>
<head>
<title>聚光灯效果</title>
<style>
.spotlight {
width: 300px;
height: 300px;
border-radius: 50%;
background: conic-gradient(
from 225deg,
rgba(0, 0, 0, 0.9) 0%,
rgba(0, 0, 0, 0.1) 30%,
rgba(0, 0, 0, 0) 50%,
rgba(0, 0, 0, 0.1) 70%,
rgba(0, 0, 0, 0.9) 100%
);
}
</style>
</head>
<body>
<div class="spotlight"></div>
</body>
</html>代码解释：
from 225deg： 聚光灯从左下方照射。rgba(0, 0, 0, 0.9) 0%和rgba(0, 0, 0, 0.9) 100%： 边缘是强阴影。rgba(0, 0, 0, 0.1) 30%和rgba(0, 0, 0, 0.1) 70%： 逐渐减弱的阴影。rgba(0, 0, 0, 0) 50%： 中心是完全透明的，模拟光照的中心。
关键点：
- 通过调整
from角度，可以改变光照的方向。 - 通过调整颜色停止点的位置和颜色值，可以控制光照的强度和范围。
- 可以使用
rgba()颜色值来控制透明度，创建更逼真的光照效果。
6. 数学原理深入
conic-gradient() 的核心在于，它将一个圆划分成多个扇区，并对每个扇区进行颜色插值。 颜色插值通常是线性的，但也可以通过 CSS 变量和 JavaScript 来实现更复杂的插值效果。
角度到颜色的映射：
conic-gradient() 将角度映射到颜色。 给定一个角度 θ，conic-gradient() 会计算该角度对应的颜色。 这个计算过程涉及到以下几个步骤：
- 角度归一化： 将角度
θ归一化到0到360度范围内。 如果θ大于360度或小于0度，则使用模运算将其映射到0到360度范围内。 - 颜色停止点查找： 找到包含角度
θ的两个颜色停止点。 假设这两个颜色停止点分别为C1和C2，它们对应的角度分别为θ1和θ2。 - 颜色插值： 在颜色
C1和C2之间进行插值，计算出角度θ对应的颜色。 插值可以使用线性插值、非线性插值等方法。
线性插值：
线性插值是最常用的颜色插值方法。 其公式如下：
C = C1 + (C2 - C1) * (θ - θ1) / (θ2 - θ1)
其中：
C是角度θ对应的颜色。C1和C2是包含角度θ的两个颜色停止点的颜色。θ1和θ2是C1和C2对应的角度。
非线性插值：
可以使用 CSS 变量和 JavaScript 来实现更复杂的非线性插值效果。 例如，可以使用 cubic-bezier() 函数来定义一个自定义的插值曲线。
7. 实际应用场景
conic-gradient() 在实际开发中有很多应用场景，除了前面提到的饼图和光照效果之外，还可以用于：
- 仪表盘： 创建各种仪表盘效果，例如速度表、电量表等。
- 进度条： 创建环形进度条。
- Loading 动画： 创建各种有趣的 loading 动画效果。
- 视觉特效： 结合 CSS 动画和 JavaScript，可以创建各种炫酷的视觉特效。
8. 兼容性
conic-gradient() 的兼容性相对较好，主流浏览器都支持。 但是，为了确保最佳的兼容性，建议使用 autoprefixer 等工具来自动添加浏览器前缀。 具体兼容性信息可以参考 Can I use。
9. 性能考量
conic-gradient() 的性能取决于渐变的复杂程度。 复杂的渐变（例如，包含大量颜色停止点）可能会影响性能。 因此，在创建 conic-gradient() 时，应该尽量减少颜色停止点的数量，并避免使用过于复杂的插值效果。 此外，可以使用 CSS 的 will-change 属性来优化性能。
10. 深入理解，灵活运用
通过学习 conic-gradient() 的基本语法、坐标系、角度、数学原理以及实际应用场景，我们可以更灵活地运用它来创建各种各样的视觉效果。 掌握了这些知识，你就可以充分发挥 conic-gradient() 的潜力，为你的 Web 应用增添更多创意和活力。
圆锥渐变不仅仅是一种CSS属性，更是一种强大的视觉工具，只要理解其背后的数学原理和坐标关系，就能创造出无限可能。
更多IT精英技术系列讲座，到智猿学院