在html canvas中，如何使用两个path，绘制出两个颜色的线段？

Question

效果类似这样，

但是期望交点出能够平滑一些

如果用一个 path 的话就没办法设置两个颜色

--------------------------------补充问题

补充问题

echarts 的效果是这样

当然，这个现在可以实现

但是，它的动画效果是这样 （录制的gif貌似不是很清晰🤔）
这有一个在线的效果例子：https://codesandbox.io/s/h695fl

也就是说，其中某一帧是这样的

那么，我要实现和echarts一样的动画效果，又该如何实现呢？

Answer 1

使用SVG，比较方便做过度，bing一下挺多的

Answer 2

实现了

Answer 3

是要这样的吗？

<canvas id="can" width="500" height="500"></canvas>    

const canvas = document.querySelector("#can");
const context = canvas.getContext("2d");
const gradient = context.createLinearGradient(100, 100, 100, 110);
gradient.addColorStop("0", "blue");
gradient.addColorStop("1", "red");
context.moveTo(100, 100);
context.lineTo(300, 100);
context.lineTo(99, 99);//画一条到某个地方的线条
context.lineTo(200, 300);//画一条到某个地方的线条

context.lineWidth = 10;//设置线条的宽度
context.strokeStyle = gradient;
context.lineJoin = "round";
context.closePath();
context.stroke();
context.beginPath();