by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11914
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、千呼万唤始出来

好消息，Canvas也支持锥形渐变了，方法名称是createConicGradient()方法。

兼容性参见下图：

所有现代浏览器都已经支持，且已经支持了2年了。

需要使用Canvas锥形渐变的场景

最近遇到了个需求，必须使用Canvas实现锥形渐变，而不能是CSS。

那就是下图所示的饼图效果：

如果单论实现，无论是CSS还是Canvas都可以，CSS更佳，因为成本更低。

但是，注意看图片的左上角，还有一个下载为图片的功能。

html2canvas是不支持CSS锥形渐变的，保存的图片是空白。

所以需要Canvas实现，转换为图片，这样就能截图保存了。

也是就用到了这个createConicGradient()方法来绘制饼图。

二、createConicGradient语法

语法如下：

createConicGradient(startAngle, x, y)

表示创建一个锥形渐变开始的位置。

其中startAngle是锥形的圆弧所在，需要注意的是，和CSS不同，在Canvas中，角度0表示的是三点钟方向，有就是水平朝右，但是CSS是12点钟方向，垂直朝上。

我们通过一个案例来了解下createConicGradient()方法是如何使用的。

<canvas></canvas>

绘制代码为：

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

// 尺寸
const size = 300;
canvas.width = size;
canvas.height = size;

// 创建锥形渐变
const gradient = ctx.createConicGradient(-0.5 * Math.PI, size / 2, size / 2);

// 色带颜色
const arrColor = ['#10239E', '#2F54EB','#597EF7', '#85A5FF', '#D6E4FF'];
// 各自占据的百分比
const arrPercent = [0.07, 0.13, 0.2, 0.27, 0.33];

// 添加中断点
let sumPercent = 0;
arrPercent.forEach((percent, index) => {
  gradient.addColorStop(sumPercent, arrColor[index]);
  sumPercent += percent;
  gradient.addColorStop(sumPercent, arrColor[index]);
});

// 设置渐变为填充样式
ctx.fillStyle = gradient;
// 绘制圆形
ctx.ellipse(size / 2, size / 2, size / 2 - 30, size / 2 - 30, 0, 0, 2 * Math.PI);
// 填充
ctx.fill();

在浏览器中的实时绘制效果如下：

完美！

在过去，本文所展示的饼图效果，我们可以使用arc()扇形绘制方法模拟，非本文重点，不做展开。

三、结语

如果你让AI实现锥形渐变，大概率会使用CSS conic-gradient()锥形渐变，但是你让他解决html2canvas无法导出图片的问题，AI就会扯东扯西，不知道该如何是好了。

所以，新时代，我们学习前端，可能具体的技术细节不需要掌握，但是，结构、方向、策略、细节还是需要掌握的。

比方说本文的案例，你需要知道使用Canvas来绘制渐变，指导AI使用这个方法，他就能搞定，否则，AI就会迷路。

其中这样的例子很多。

例如，之前有同事想要在手机端实现划词交互效果，问AI，结果AI弄了一大堆代码，使用鼠标事件实现的，很啰嗦。于是同事就问我，我就说试试selectionchange事件，这么一点拨，AI立马就糊涂状态变成了大师。

还有案例，可编辑输入框类似于AT成组的交互，AI的实现也是，洋洋洒洒，代码多得不得了，感觉把整个编辑器都弄进来了。

实际，走DOM监控单向数据流，就百来行代码的事情。

所以说，学习新特性还是有用的。

我也不会担心自己被AI取代，只要持续学习，不排斥新事物，我只会比之前更加具有竞争力。

好了，又扯多了，最后，我家侍妾慕沛灵压阵，道友请转发！

😉😊😇
🥰😍😘

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11914

（本篇完）