使用paper.js实现SVG角度渐变的可行性及实现方法咨询

我正在使用paper.js创建渐变图形，目前我已参考相关示例实现了Linear Gradient（线性渐变）和Radial Gradient（径向渐变），但尚未找到任何使用paper.js和SVG实现*Angle Gradient（角度渐变）*的示例或指导说明，请问该需求是否可以实现？

以下是我在paper.js官方网站找到的两种渐变实现示例以及对应代码，可以实现线性渐变和径向渐变效果：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gradients</title>
    <link rel="stylesheet" href="../css/style.css">
    <!-- IE 9: display inline SVG -->
    <meta http-equiv="X-UA-Compatible" content="IE=9">
    <script type="text/javascript" src="../../dist/paper-full.js"></script>
    <script type="text/paperscript" canvas="canvas">
        var stops = [new Color(1, 1, 0, 0), 'red', 'black'];

        var radius = view.bounds.width * 0.4,
            from = new Point(view.center.x),
            to = from + [radius, 0];

        var circle = new Path.Circle({
            center: from,
            radius: radius,
            fillColor: {
                stops: stops,
                radial: true,
                origin: from,
                destination: to
            },
            strokeColor: 'black'
        });

        var from = view.bounds.leftCenter,
            to = view.bounds.bottomRight;

        var rect = new Path.Rectangle({
            from: from,
            to: to,
            fillColor: {
                stops: stops,
                radial: false,
                origin: from,
                destination: to
            },
            strokeColor: 'black'
        });

        //rect.rotate(45).scale(0.7);

        document.body.appendChild(project.exportSVG());
    </script>
</head>
<body>
    <canvas id="canvas" width="300" height="600"></canvas>
</body>
</html>

paper.js目前没有内置角度渐变（也叫锥形渐变）的原生支持，对应的SVG标准中，角度渐变属于SVG 2新增的<conicalGradient>特性，当前也没有被paper.js纳入封装范围。但可以通过两种方案实现需求：

• 仅需canvas渲染无需导出SVG时，直接调用canvas原生的createConicGradient API生成角度渐变，绑定到paper.js创建的路径上填充即可，示例代码如下：

// 基于原有代码的角度渐变实现示例
const ctx = document.getElementById('canvas').getContext('2d');
// 参数依次为起始角度、渐变中心x坐标、渐变中心y坐标
const conicGradient = ctx.createConicGradient(0, view.center.x, view.center.y);
// 添加色标，和原有逻辑保持一致
conicGradient.addColorStop(0, 'rgba(255,255,0,0)');
conicGradient.addColorStop(0.5, 'red');
conicGradient.addColorStop(1, 'black');
// 创建圆形路径
const circle = new Path.Circle({
    center: view.center,
    radius: view.bounds.width * 0.4,
    strokeColor: 'black'
});
// 用生成的角度渐变填充路径
ctx.fillStyle = conicGradient;
ctx.fill(circle.getPathData());

• 需要导出SVG格式时，可以在调用project.exportSVG()生成SVG内容后，手动插入<conicalGradient>标签到SVG的defs节点，再给对应图形的fill属性绑定该渐变的id即可，该方案生成的SVG仅在支持SVG 2标准的浏览器中可以正常显示角度渐变效果。

内容的提问来源于stack exchange，提问作者Christopher Martinez