Canvas draws a line chart of a smooth curve

write a line chart with native JS, right-angled ones can be written, but now you need to change into a smooth curve, similar to:

clipboard.png


clipboard.png

the inflection point is still at a right angle, is there any god who can provide the next solution

Feb.26,2021

The

cubic curve has not been studied yet. if it is a conic, you can first find the midpoint between two points, so that the end point of the curve is this midpoint, of course, if you want to pass through the beginning and end of the point, you have to rule it out. The core code is as follows:

Random dot connection example

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

for (i = 1; i < numPoints - 2; iPP) {
  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();
Menu