<! DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Demo smooth connection</title> </head> <body> <canvas id="canvas"></canvas> <style> html { position: relative; height: 100%; width: 100%; } body { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: 0; } canvas { outline: 1px solid red; } </style> <script> const getDistance = (p1, p2) => { return Math.sqrt( Math.pow(p1.x + p2.x, 2) + Math. Pow (P1.Y + P1.Y, 2))} const GetControlPoint = (points) => {const P01 = GetDistance (points[0], points[1]) const p12 = getDistance(points[1], points[2]) const p02 = p01 + p12 let vector = [points[2].x - points[0].x, Points. [2] y - points [0]. Y] return [{x: points [1]. The X-ray vector [0] * 0.5 * p01 / p02, y: X: = points[1]. X: = points[1]. X: = points[1]. X: = points[2]. X: = points[1]. X: = points[2]. X: = points[2]. Points [1].y + vector[1] * 0.5 * P01 / P02}]} let canvas = document.querySelector('canvas') let CTX = document.querySelector('canvas').y + vector[1] * 0.5 * P01 / P02} canvas.getContext('2d') window.onload = window.onresize = () => { canvas.width = document.body.clientWidth canvas.height = document.body.clientHeight drawBezierCurve() drawPoint() } let points = [ { x: 131, y: 193 }, { x: 187, y: 128 }, { x: 231, y: 240 }, { x: 280, y: 124 }, { x: 340, y: 236 }, { x: 368, y: 131 }, { x: 416, y: 239 }, ] const drawPoint = () => { points.forEach(point => { ctx.beginPath() ctx.arc(point.x, point.y, 5, 0, 2 * Math.PI) ctx.fill() }) } const drawBezierCurve = () => { let len = points.length if (len < 2) { return } ctx.beginPath() ctx.moveTo(points[0].x, points[0].y) if (len === 2) { ctx.lineTo(points[1].x, points[1].y) } else { let controlPoint = [] for (let i = 1; i < len - 1; i++) { controlPoint = controlPoint.concat(getControlpoint([points[i - 1], points[i], points[i + 1]])) } let i = 2 ctx.quadraticCurveTo(controlPoint[0].x, controlPoint[0].y, points[1].x, points[1].y) for (; i < len - 1; i++) { ctx.bezierCurveTo( controlPoint[(i - 2) * 2 + 1].x, controlPoint[(i - 2) * 2 + 1].y, controlPoint[(i - 1) * 2].x, controlPoint[(i - 1) * 2].y, points[i].x, points[i].y ) } console.log(controlPoint, i) ctx.quadraticCurveTo( controlPoint[(i - 2) * 2 + 1].x, controlPoint[(i - 2) * 2 + 1].y, points[i].x, points[i].y ) } ctx.strokeStyle = 'blue' ctx.stroke() } </script> </body> </html>
Note: 1. Use quadraticcurveTo for the second and last points. 2. Line 1 is controlled by 2 and 3 points
References: https://stackoverflow.com/questions/7054272/how-to-draw-smooth-curve-through-n-points-using-javascript-html5-canvas/1006 0462 # 10060462 principle: http://scaledinnovation.com/analytics/splines/aboutSplines.html