今天遇到一个需求，要画出自然的曲线代替直线，研究了一下可以用三次贝塞尔曲线，找好2个控制点的位置即可：
运行效果：
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>两点之间画出平滑的曲线Bézier Curve</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f9;
}
svg {
background: white;
border: 1px solid #ccc;
}
path {
fill: none;
stroke: steelblue;
stroke-width: 2;
}
</style>
</head>
<body>
<svg id="bezierCanvas" width="800" height="400"></svg>
<script>
// Function to draw a Bézier curve
function drawBezierCurve(svg, startX, startY, endX, endY) {
// Calculate control points
const controlX1 = startX + (endX - startX) / 3;
const controlY1 = startY - 50;
const controlX2 = endX - (endX - startX) / 3;
const controlY2 = endY + 50;
// Create the Bézier curve path
const pathData = `M ${startX} ${startY} C ${controlX1} ${controlY1}, ${controlX2} ${controlY2}, ${endX} ${endY}`;
// Add path to SVG
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("d", pathData);
svg.appendChild(path);
}
// Get the SVG canvas
const svg = document.getElementById("bezierCanvas");
// Example: Draw a curve
drawBezierCurve(svg, 100, 100, 700, 100);
drawBezierCurve(svg, 100, 100, 700, 120);
drawBezierCurve(svg, 100, 100, 700, 140);
drawBezierCurve(svg, 100, 100, 700, 160);
drawBezierCurve(svg, 100, 100, 700, 180);
drawBezierCurve(svg, 100, 100, 700, 200);
drawBezierCurve(svg, 100, 100, 700, 220);
drawBezierCurve(svg, 100, 100, 700, 240);
drawBezierCurve(svg, 100, 100, 700, 260);
drawBezierCurve(svg, 100, 100, 700, 280);
drawBezierCurve(svg, 100, 200, 700, 100);
drawBezierCurve(svg, 100, 200, 700, 120);
drawBezierCurve(svg, 100, 200, 700, 140);
drawBezierCurve(svg, 100, 200, 700, 160);
drawBezierCurve(svg, 100, 200, 700, 180);
drawBezierCurve(svg, 100, 200, 700, 200);
drawBezierCurve(svg, 100, 200, 700, 220);
drawBezierCurve(svg, 100, 200, 700, 240);
drawBezierCurve(svg, 100, 300, 700, 100);
drawBezierCurve(svg, 100, 300, 700, 120);
drawBezierCurve(svg, 100, 300, 700, 140);
drawBezierCurve(svg, 100, 300, 700, 160);
drawBezierCurve(svg, 100, 300, 700, 180);
drawBezierCurve(svg, 100, 300, 700, 200);
drawBezierCurve(svg, 100, 300, 700, 220);
drawBezierCurve(svg, 100, 300, 700, 240);
// for(let i = 0; i < 100;i++){
// drawBezierCurve(svg, 100, 100+i*10, 700, 100);
// }
</script>
</body>
</html>
