canvas绘制圆滑曲线的折线图

Question

用原生JS写折线图，直角的可以写出来，但是目前需要变做圆滑的曲线，类似：尝试用贝塞尔曲线画let curveness = 0.2;// 起点let x0 = vertices[t - 1].x;let y0 = vertices[t - 1].y;// 终点let x2 = vertices[t].x;let y2 = vertices[t].y;// 贝塞尔曲线中间点 curveness曲率let x1 = (x0 + x2) / 2 - (y0 - y2) * curveness;let y1 = (y0 + y2) / 2 - (y2 - y0) * curveness;ctx.beginPath();ctx.moveTo(vertices[t - 1].x, vertices[t - 1].y);ctx.bezierCurveTo(x0, y0, x1, y1, x2, y2);// ctx.arcTo(x1, y1, x2, y2, 100);效果达不到需求的样子拐点处还是直角的，有没有大神可以提供下解决思路呢

Answer 1

三次曲线还没研究过，如果是二次曲线可以先求两点之间的中点，让曲线的终点是这个中点即可，当然如果要经过首尾的点的话，就要排除一下。核心代码如下：

随机点连线例子

context.beginPath();

context.moveTo(points[0].x, points[0].y);

for (i = 1; i < numPoints - 2; i++) {

  ctrlPoint.x = (points[i].x + points[i + 1].x) / 2;

  ctrlPoint.y = (points[i].y + points[i + 1].y) / 2;

  context.quadraticCurveTo(points[i].x, points[i].y, ctrlPoint.x, ctrlPoint.y);

}

context.quadraticCurveTo(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y);

context.stroke();