Mark
参考: https://www.cnblogs.com/jay-dong/archive/2012/09/26/2704188.html
简单运用:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> 二次贝塞尔曲线: 公式; 起点: P0; 终点: p2; 控制点: p1; 曲线长度比例: t; <br/> B(t) = (1 - t)^2 * P0 + 2 * t * (1 - t) * P1 + t^2 * P2; <br/><br/><br/> 三次贝塞尔曲线: 公式; 起点: P0; 终点: p3; 控制点1: p1; 控制点2: p2; 曲线长度比例: t; <br/> B(t) = P0 * (1-t)^3 + 3 * P1 * t * (1-t)^2 + 3 * P2 * t^2 * (1-t) + P3 * t^3, t ∈ [0,1] <script> function curve( t, p0, p1, p2) { var point = Point( 0, 0 ); var temp = 1 - t; point.x = temp * temp * p0.x + 2 * t * temp * p1.x + t * t * p2.x; point.y = temp * temp * p0.y + 2 * t * temp * p1.y + t * t * p2.y; return point; } /** * 三阶贝塞尔曲线 * B(t) = P0 * (1-t)^3 + 3 * P1 * t * (1-t)^2 + 3 * P2 * t^2 * (1-t) + P3 * t^3, t ∈ [0,1] * * @param t 曲线长度比例 * @param p0 起始点 * @param p1 控制点1 * @param p2 控制点2 * @param p3 终止点 * @return t对应的点 */ function curve3( t, p0, p1, p2, p3) { var point = Point( 0, 0 ); var temp = 1 - t; point.x = p0.x * temp * temp * temp + 3 * p1.x * t * temp * temp + 3 * p2.x * t * t * temp + p3.x * t * t * t; point.y = p0.y * temp * temp * temp + 3 * p1.y * t * temp * temp + 3 * p2.y * t * t * temp + p3.y * t * t * t; return point; } function Point(x, y) { return {x: x, y: y} } var p0 = {x: 150, y: 50}; var p1 = {x: 0, y: 150}; var p2 = {x: 200, y: 500}; var ps = []; var cy = 16; for (var i = 0; i < cy; i++) { ps.push( curve(i / cy, p0, p1, p2) ); } var canvas = document.createElement('canvas'); canvas.width = 1000; canvas.height = 600; var context = canvas.getContext('2d'); context.moveTo(ps[0].x, ps[0].y); for(var i = 1; i < ps.length; i++) { context.lineTo(ps[i].x, ps[i].y); } context.stroke(); document.body.appendChild(canvas); </script> </body> </html>
附: 二阶贝塞尔曲线公式推导过程:
